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

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

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

 

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

java代码：

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。。。。

Xml代码：

<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就行。给个例子：

Java代码：

@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表单，

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

Js代码：

。。。。上略
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;
    },
。。。。。。下略

Js代码：

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:{},就可以了。注意它是一个对象。

Js代码：

$.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);
            }
        })

 ajaxfileupload.js下载 https://files.cnblogs.com/files/wangwiz/ajaxfileupload.js