Spring MVC + Ajax异步提交文件（多个）和数据

Spring MVC + Ajax异步提交文件（多个）和数据

原文出自：http://anxpp.com，转载请注明出处，谢谢！

    我还是决定记录一下。

    该JS由ajaxfileupload.js改造，原理是使用了Ifream，所以页面不会刷新。

改造后的ajaxfileupload.js：

  
  
jQuery.extend({
    createUploadIframe: function (id, uri) {
        var frameId = "jUploadFrame" + id;
        if (window.ActiveXObject) {
            var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />');
            if (typeof uri == "boolean") {
                io.src = "javascript:false"
            } else {
                if (typeof uri == "string") {
                    io.src = uri
                }
            }
        } else {
            var io = document.createElement("iframe");
            io.id = frameId;
            io.name = frameId
        }
        io.style.position = "absolute";
        io.style.top = "-1000px";
        io.style.left = "-1000px";
        document.body.appendChild(io);
        return io
    }, createUploadForm: function (id, fileElementId) {
        var formId = "jUploadForm" + id;
        var fileId = "jUploadFile" + id;
        var form = $('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');
        for (var i in fileElementId) {
            var oldElement = jQuery("#" + fileElementId[i]);
            var newElement = jQuery(oldElement).clone();
            jQuery(oldElement).attr("id", fileId);
            jQuery(oldElement).before(newElement);
            jQuery(oldElement).appendTo(form)
        }
        $(form).css("position", "absolute");
        $(form).css("top", "-1200px");
        $(form).css("left", "-1200px");
        $(form).appendTo("body");
        return form
    }, addOtherRequestsToForm: function (form, data) {
        var originalElement = $('<input type="hidden" name="" value="">');
        for (var key in data) {
            name = key;
            value = data[key];
            var cloneElement = originalElement.clone();
            cloneElement.attr({
                "name": name,
                "value": value
            });
            $(cloneElement).appendTo(form)
        }
        return form
    }, ajaxFileUpload: function (s) {
        s = jQuery.extend({}, jQuery.ajaxSettings, s);
        var id = new Date().getTime();
        var form = jQuery.createUploadForm(id, s.fileElementId);
        if (s.data) {
            form = jQuery.addOtherRequestsToForm(form, s.data)
        }
        var io = jQuery.createUploadIframe(id, s.secureuri);
        var frameId = "jUploadFrame" + id;
        var formId = "jUploadForm" + id;
        if (s.global && !jQuery.active++) {
            jQuery.event.trigger("ajaxStart")
        }
        var requestDone = false;
        var xml = {};
        if (s.global) {
            jQuery.event.trigger("ajaxSend", [xml, s])
        }
        var uploadCallback = function (isTimeout) {
            var io = document.getElementById(frameId);
            try {
                if (io.contentWindow) {
                    xml.responseText = io.contentWindow.document.body ? io.contentWindow.document.body.innerHTML : null;
                    xml.responseXML = io.contentWindow.document.XMLDocument ? io.contentWindow.document.XMLDocument : io.contentWindow.document
                } else {
                    if (io.contentDocument) {
                        xml.responseText = io.contentDocument.document.body ? io.contentDocument.document.body.innerHTML : null;
                        xml.responseXML = io.contentDocument.document.XMLDocument ? io.contentDocument.document.XMLDocument : io.contentDocument.document
                    }
                }
            } catch (e) {
            }
            if (xml || isTimeout == "timeout") {
                requestDone = true;
                var status;
                try {
                    status = isTimeout != "timeout" ? "success" : "error";
                    if (status != "error") {
                        var data = jQuery.uploadHttpData(xml, s.dataType);
                        if (s.success) {
                            s.success(data, status)
                        }
                        if (s.global) {
                            jQuery.event.trigger("ajaxSuccess", [xml, s])
                        }
                    } else {
                    }
                } catch (e) {
                    status = "error";
                }
                if (s.global) {
                    jQuery.event.trigger("ajaxComplete", [xml, s])
                }
                if (s.global && !--jQuery.active) {
                    jQuery.event.trigger("ajaxStop")
                }
                if (s.complete) {
                    s.complete(xml, status)
                }
                jQuery(io).unbind();
                setTimeout(function () {
                    try {
                        $(io).remove();
                        $(form).remove()
                    } catch (e) {
                    }
                }, 100);
                xml = null
            }
        };
        if (s.timeout > 0) {
            setTimeout(function () {
                if (!requestDone) {
                    uploadCallback("timeout")
                }
            }, s.timeout)
        }
        try {
            var form = $("#" + formId);
            $(form).attr("action", s.url);
            $(form).attr("method", "POST");
            $(form).attr("target", frameId);
            if (form.encoding) {
                form.encoding = "multipart/form-data"
            } else {
                form.enctype = "multipart/form-data"
            }
            $(form).submit()
        } catch (e) {
        }
        if (window.attachEvent) {
            document.getElementById(frameId).attachEvent("onload", uploadCallback)
        } else {
            document.getElementById(frameId).addEventListener("load", uploadCallback, false)
        }
        return {
            abort: function () {}
        }
    }, uploadHttpData: function (r, type) {
        var data = !type;
        data = type == "xml" || data ? r.responseXML : r.responseText;
        if (type == "script") {
            jQuery.globalEval(data)
        }
        if (type == "json") {
            var data = r.responseText;
            var rx = new RegExp("<pre.*?>(.*?)</pre>", "i");
            var am = rx.exec(data);
            var data = (am) ? am[1] : "";
            eval("data = " + data)
        }
        if (type == "html") {
            jQuery("<div>").html(data).evalScripts()
        }
        return data
    }
});

Html代码：

    注意：这里的文件域的name属性，与后台接口中文件参数名对应（是一样的）。

  
  
<input type="file" name="files" id="files"/>
<input type="file" name="files" id="files1"/>
<input type="file" name="files" id="files2"/>
<input type="text" id="title_" name="title" placeholder="标题"/>
<input type="text" id="content_" name="content" placeholder="内容"/>
<input onclick="ajaxFileUpload()" type="button" value="上传" />

提交方法：

  
  
function ajaxFileUpload() {
    var params = {};
    params['title'] = $("#title_").val();
    params['content'] = $("#content_").val();
    $.ajaxFileUpload
    (
            {
                url: URLS['addArticle'],                        //用于文件上传的服务器端请求地址
                secureuri: false,                               //是否需要安全协议，一般设置为false
                fileElementId: ['files','files1','files2'],     //文件上传域的ID
                dataType: 'json',                               //返回值类型 一般设置为json
                data:params,
                type:'post',
                success: function (data, status)                //服务器成功响应处理函数
                {
                    $("#img1").attr("src", data.imgurl);
                    if (typeof (data.error) != 'undefined') {
                        if (data.error != '') {
                            alert(data.error);
                        } else {
                            alert(data.msg);
                        }
                    }
                },
                error: function (data, status, e)//服务器响应失败处理函数
                {
                    alert(e);
                }
            }
    )
    return false;
}

后台代码：

   
   
    @RequestMapping("/add")
    public Map<String, Object> addArticle(Article article,@RequestParam MultipartFile files[]){
        if(Utils.isNotNull(files))
            try{
                for(MultipartFile file : files)
                    FileUtils.writeByteArrayToFile(new File("c:/upload/"+file.getOriginalFilename()), file.getBytes());
            }catch(Exception e){
                e.printStackTrace();
            }
        return set(service.addArticle(article));
    }

需要的jar包：

    此处使用Maven

  
  
      <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.3.1</version>
        </dependency>
        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.3</version>
        </dependency>

以上代码，如果没有文件会报错，后台如下改即可：

   
   
    public Map<String, Object> addArticle(Article article,HttpServletRequest request){
        if (request instanceof MultipartHttpServletRequest)
            try{
                List<MultipartFile> files = ((MultipartHttpServletRequest)request).getFiles("files");
                if(Utils.isNotNull(files))
                    for(MultipartFile file : files)
                        FileUtils.writeByteArrayToFile(new File("c:/upload/"+file.getOriginalFilename()), file.getBytes());
            }catch(Exception e){
                e.printStackTrace();
            }
        return set(service.addArticle(article));
    }

完成

至此，可以上传多文件了，并且同时可以上传附件。

仅作记录，代码完整且本人已测试通过（需要Jquery支持），所以不作多的解释。