【Jsp】使用AjaxFileUploader与jspsmartupload完成不刷新的Ajax文件上传系统

这个不刷新的Ajax文件上传系统同样可以用来做预览图

虽然预览图完全可以通过不上传图片就完成,但是不刷新的Ajax文件上传系统可以做到上传完图片立即返回上传结果给用户的结果

上次在《【Jsp】使用jspsmartupload完成简单的文件上传系统》(点击打开链接)一文中完成了一个简单的文件上传系统

但是这个文件上传系统过于传统,

上传完文件之后需要跳转到另外一个页面中提交表单,处理表单,然后再提供一个“返回”按钮给用户

如果用户要求上传之后,马上看到图片,并且不跳转,只好利用Ajax技术来实现,

但是在《【Jsp】Jqueryajax技术在Jsp中的应用与javascript中的正则表达式》(点击打开链接)一文中介绍的Ajax技术只能传输普通的表单文本,

那么如果要求Jsp中的Ajax技术能够传输文件,那该怎么办呢?

这时候,要用到AjaxFileUploader控件来支持文件在Ajax的传输


一、基本目标

能够在一个网页中完成图片的上传,并显示上传的结果,如图:


图的左侧是我tomcat文件夹,图右侧则是我的网页。

如果上传的是非文件,那么则弹出对话框决绝



二、制作过程

1、首先要配置好jspsmartupload与AjaxFileUploader,jspsmartupload在《【Jsp】使用jspsmartupload完成简单的文件上传系统》(点击打开链接)一文中讲过来,其实就是一个jar包,不再赘述,AjaxFileUploader则可以到官网(点击打开链接)中下载,我也给加上传了一份(点击打开链接),然后在eclipse中新建一个工程,把jspsmartupload.jar放到...\WebRoot\WEB-INF\lib之中,AjaxFileUploader是一个压缩包,解压后到AjaxFileUploader如下:


把里面的ajaxfileupload.js与jquery.js复制到工程目录下,最好新建一个文件夹,如WebRoot\js,再与工程目录下新建一个pic文件夹用来存放上传图片,整个目录结构如下图:


其中index.jsp是系统自带的,被笔者涂黑的upload.jsp与本工程无关


2、uploadsuc.jsp

这个文件没什么好说的,原理与《【Jsp】使用jspsmartupload完成简单的文件上传系统》(点击打开链接)一文中的一样,下面是其代码:

<!-- 注意页首两个包是怎么引用的 -->
<%@ page language="java" import="java.util.*,com.jspsmart.upload.*"
	pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>上传处理页面</title>
	</head>

	<body>
		<% 
			//之所以要放到异常抛出结构里面,是为了避免直接访问此页报错 
		try{
				//指定动作 
				SmartUpload smart=new SmartUpload(); 
				smart.initialize(pageContext); 
				smart.upload(); 
				//把文件保存到同目录的pic文件夹 
				smart.save("/pic/"); 
		}
		catch(Exception e){
			%>
			出错!
			<%
		}
		 %>
		<a href="upload.jsp">返回</a>
	</body>
</html>

3、Fileupload.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
	<!-- 开头引入两个组件文件 -->
	<script src="js/jquery.js"></script>
	<script src="js/ajaxfileupload.js"></script>
	</head>
	<!-- body部分也是一个很简单的表单,注意action必须为空,方式为post,并且注意编码, -->
	<!-- 里面有个file控件,一旦用户选择完文件之后,直接触发下面脚本的ajaxFileUpload()函数提交 -->
	<body>
		<form name="form" action="" method="POST" enctype="multipart/form-data">
			<input id="myUpload" type="file" name="myUpload" onchange="return ajaxFileUpload();">
			<!-- 这个id为pic的控件是用来显示上传图片的 -->
			<img id="pic" src="" />
		</form>
	</body>
</html>
<script type="text/javascript">
function ajaxFileUpload()
{
	//下面两行代码是先拿到id为myUpload的文件的文件名,注意文件名是这样取的,file控件的values值是一个伪路径,file控件+脚本从来就无法直接操作文件
	var filename=$("#myUpload").val();
	filename = filename.substring(filename.lastIndexOf("\\")+1);
	//下面是取得文件的后缀名,如果后缀名不是图片后缀名,那么则不运行ajax上传代码,之间到下面的else中弹窗
	exname = filename.substring(filename.lastIndexOf(".")+1);
   	if(exname.indexOf("png")!=-1||exname.indexOf("jpg")!=-1||exname.indexOf("gif")!=-1||exname.indexOf("bmp")!=-1||exname.indexOf("jpeg")!=-1){
		
		$.ajaxFileUpload
		(
			{
				url:'uploadsuc.jsp',
				secureuri:false,
				//这里的结构与普通ajax是一样的,到uploadsuc.jsp中响应,注意下面的fileElementId就行,指明传递的文件是id为myUpload的东西
				fileElementId:'myUpload',
				dataType: 'text',
				success: function (data)
				{
				//如果成功,那么则设置id为pic的图片的src,这样pic就能成功显示
					$("#pic").attr("src","./pic/"+filename);
				},
				error: function (data)
				{
					alert("error");
				}
			}
		)
	}
	else{
		alert("必须是图片!");
	}
	return false;

}
</script>

三、备注

至此,一个简单的ajax文件上传系统就完成了,部分tomcat可能不支持中文链接,导致图片上传之后无法成功显示,

此时,应该打开tomcat的目录,如apache-tomcat-6.0.43\conf\下的server.xml,用记事本打开,找到Connector port="8080" protocol="HTTP/1.1"那行,加上URIEncoding="UTF-8",如图:


郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。