jquery 插件ajaxfileupload与struts2结合 实现异步上传图片

       因为项目需要，想实现一个异步上传图片的功能。当然这时struts2自带的fileupload拦截器不能用了。

网上搜了下，基本都是用插件来实现了，我就随便选择了一个简单的插件-ajaxfileupload来实现、

先构架出struts2的框架就不说了，无非那5个常用的jar包导入而已。因为是jquery的插件，因此需要添加jquery库文件以及核心文件ajaxfileupload.js，下面附件中会有这个js文件。写一个相当简单的上传类：

package com.aokunsang.action;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;

import org.apache.struts2.ServletActionContext;

import com.opensymphony.xwork2.ActionSupport;

public class FileUploadAction extends ActionSupport {

	private File file;
	private String fileFileContentType;
	private String fileFileName;
	
	public void upload() throws Exception{
		String message = "";
		//这里的返回类型设置是重点。否则会报错，必须设置成text/html;如果设置成application/json  IE下会有问题，chrome没问题的。
		ServletActionContext.getResponse().setContentType("text/html;charset=utf-8");
		ServletActionContext.getResponse().setCharacterEncoding("utf-8");
		if(fileFileName.endsWith(".exe")){
			message = "不允许上传此类文件！";
		}else if(!file.exists()){
			message = "此文件不存在！";
		}else {
			FileInputStream fis = new FileInputStream(file);
			FileOutputStream fos = new FileOutputStream(new File("F://aa.jpg"));
			byte bt[] = new byte[500];
			while(fis.read(bt)>0){
				fos.write(bt);
			}
			fis.close();
			fos.flush();
			fos.close();
			message = "文件上传成功！";
		}
		ServletActionContext.getResponse().getWriter().write("{msg:\""+message+"\"}");
		ServletActionContext.getResponse().getWriter().flush();
		ServletActionContext.getResponse().getWriter().close();
	}

	setter和getter。。。。
           

<package namespace="/" name="root" extends="struts-default">
		<action name="fileUpload" class="com.aokunsang.action.FileUploadAction" method="upload">
		</action>
	</package>      

这里大家可能注意到：我的action中的方法没有返回值，因为我用ServletActionContext.getResponse().getWriter().write()直接返回给jquery回调函数需要的参数，所以没用struts2

的必须返回值，当然你也可以有返回值none等。

重点解析：

   1、网上有说需要用struts-json.jar,我观察发现他们使用这个jar文件无非是想返回jquery的回调函数一个json字符串【切记是个字符串】而已。因此我使用：ServletActionContext.getResponse().setContentType("text/html;charset=utf-8");

   2、注意返回字符串的格式：必须是一个json格式的字符串，并且为"{msg:''}"这样类型。

    3、当使用springMVC3.x时候，会使用@ResponseBody返回个json字符串，contentType为application/json类型，经测试，发现chrome正常；IE下会有问题(IE下得到的json字符串是：<PRE>json字符串</PRE>【带有PRE标签，不知道啥玩意原因】)。解决方法：只要把contentType设置成text/html就行。给个例子：

@RequestMapping(value="uploadImage",method=RequestMethod.POST)
	public void uploadImage(HttpServletResponse response,MultipartFile imgFile,String imgFlag,String companyid) throws IOException{
	
	......

	Map<String,String> resultParam = new HashMap<String,String>();
	resultParam.put("msg", msg);
	resultParam.put("error", error);
	response.setContentType("text/html");
	ObjectMapper objectMapper = new ObjectMapper();
	JsonGenerator generator = objectMapper.getJsonFactory().createJsonGenerator(response.getOutputStream(),JsonEncoding.UTF8);    //设置JSON编码格式
	objectMapper.writeValue(generator, resultParam);
}
           

可参考：http://fujiangyong2009.blog.163.com/blog/static/126217857201292510823706/

----------------------------------------------------------------------------------------------------------------------------------

网上有很多人问，ajaxfileupload是否可以添加自定义参数支持，我的回答是：完全可以。只不过需要我们手动自己添加这样的支持，看了源代码，它也是封装了一个form表单，

咱们把需要的参数添加进去不就大功告成了嘛、说整就整、看代码：

。。。。上略
createUploadForm: function(id, fileElementId, data)
	{
		//create form	
		var formId = 'jUploadForm' + id;
		var fileId = 'jUploadFile' + id;
		var form = $('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');	
		var oldElement = $('#' + fileElementId);
		var newElement = $(oldElement).clone();
		$(oldElement).attr('id', fileId);
		$(oldElement).before(newElement);
		$(oldElement).appendTo(form);
		//添加参数支持
		if(data){
			$.each(data,function(key,value){
				$("<input type='hidden' name='"+key+"' value='"+value+"'/>").appendTo(form);
			})
		}
		//set attributes
		$(form).css('position', 'absolute');
		$(form).css('top', '-1200px');
		$(form).css('left', '-1200px');
		$(form).appendTo('body');		
		return form;
    },
。。。。。。下略      

ajaxFileUpload: function(s) {
        // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout		
        s = jQuery.extend({}, jQuery.ajaxSettings, s);
        var id = new Date().getTime()        
		var form = jQuery.createUploadForm(id, s.fileElementId,s.data);
		var io = jQuery.createUploadIframe(id, s.secureuri);
		var frameId = 'jUploadFrame' + id;
		var formId = 'jUploadForm' + id;		
        // Watch for a new set of requests
        if ( s.global && ! jQuery.active++ )
		{
			jQuery.event.trigger( "ajaxStart" );
		}       

这两块代码稍作修改，即可添加自定义参数支持、那么ajaxfileupload的js中只需要添加一个参数：data:{},就可以了。注意它是一个对象。

$.ajaxFileUpload({
            url:'fileLoadTest.html',//用于文件上传的服务器端请求地址
            secureuri:false,//一般设置为false
            fileElementId:fileId,//文件上传空间的id属性  <input type="file" id="file" name="file" />
            dataType: 'json',//返回值类型 一般设置为json
            data:{"title":$("#titleId").val()},
            success: function (data, status) {
                if(typeof(data.error) != 'undefined'){
                   alert(data.msg);
                }
            },
            error: function (data, status, e) {
            	 alert(data.msg);
           	     alert(e);
            }
        })      

    注意： 附件我就不改了，大家自己稍微修改下即可使用。