Ajax异步上传文件

近来，项目有个小需求需要使用到Ajax异步上传文件，本来Ajax是不支持上传文件的，但是可以通过IFrame技术模拟实现，异步提交，原理实际上就是利用了一个隐藏的Iframe子窗体，把提交的表单的target指向这个隐藏的窗体，在提交时，浏览器的头部还会出现加载信息，但是页面却没有任何刷新，勉强实现了Ajax的异步上传。

好了，下面开始进入正题，散仙简单记录下，究竟该怎么使用Ajax异步上传文件，在实现的过程中，也遇到了一些小问题，总算皇天不负有心人，都一一解决，今记录在此，免后继者重蹈折。



实现这个功能，需要jquery的一个js文件，如下所示：

ajaxfileupload.js

首先，我们需要把这个包导入工程中，当然还得有Jquery的核心包，然后我们就可以使用ajax上传的功能了，代码如下：

function clickExecute(){

//提交表单
     $.ajaxFileUpload(
     {
     url:'workXmlAtuo',//用于文件上传的服务器端请求的Action地址
     type:"post",//请求方法
     secureuri:false,//一般设置为false
     fileElementId:'upload',//文件id属性  <input type="file" id="upload" name="upload" />
     dataType:"JSON",//返回值类型 一般设置为json,一定要大写,否则可能会出现一些bug
     success:function(msg)  {
				//	alert(msg.length);//从服务器返回的json中取出message中的数据,其中message为在struts2中定义的成员变量	 
				 $.each(msg,function(k,y){
				 	 	$("#id").append("<option  >"+y+" </option>");
				 });
				}
     }
     );


}

散仙的后台是Struts2的Action，后台就是我们常规的一些写法,因为使用了Ajax提交，所以就没必要在前台代码里写入form表单来提交了，后台部分代码如下：

/**
	 * 上传的文件名
	 * **/
	public  List<File>  upload;
	private List<String> uploadFileName;//注意要与文件名一致
    private  List<String> uploadContentType;//文件类型一致

/***
	  * 
	  * 使用Gson
	  * 把集合数据转成
	  * json
	  * 
	  * **/
     Gson g=new Gson();	  
	 HttpServletResponse r=ServletActionContext.getResponse();
	// System.out.println("解析列:"+columns);
     ServletActionContext.getResponse().setCharacterEncoding("UTF-8");
	 ServletActionContext.getResponse().setContentType("application/json;charset=utf-8");
	 r.getWriter().print(g.toJson(columns));

然后，就可以正常使用了。

使用过程中，发现2个问题：

问题一，在使用ajax上传时，dataType类型，最好写成大写的JSON，散仙一开始的时候写的小写结果，发现不能正常使用，可能是一个bug。

解决办法就是把dataType的值写成大写的JSON，即可。

问题二, 在json的集合数据返回到前台是，数据上莫名其妙的带了个pre的html标签，导致无法正常解析json，这个异常散仙在网上也找了一些解决办法，通常的是把后台的setContentType里面设置头部信息为text/html，经过此步，pre标签的问题是可以解决了
但是在前台的时候，仍不能正常显示，最后改了ajaxfileupload.js的源码，此问题得以解决。

解决办法如下图所示：



至此，所有问题都得到解决，最后散仙附上ajaxfileupload.js文件，希望能够对正在使用中的朋友有所帮助。

评论

1 楼 isy 2014-09-25  

补充一下，如果报如下错误：
jQuery.handleError is not a function

经测试handlerError只在jquery-1.4.2之前的版本中存在，jquery-1.6 和1.7中都没有这个函数了，因此在1.4.2中将这个函数复制到了ajaxFileUpload.js中，问题解决
handleError: function( s, xhr, status, e ) {
// If a local callback was specified, fire it
if ( s.error ) {
s.error.call( s.context || s, xhr, status, e );
}

// Fire the global callback
if ( s.global ) {
(s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] );
}
},