JQuery与springmvc实现多个文件上传操作

1. 导入JQuery相关JS文件

<script src="<@full_path path="js/jquery.js"/>" type="text/javascript"></script>

<script src="<@full_path path="js/ajaxfileupload.js"/>" type="text/javascript"></script>

这边ajaxfileupload.js有点特殊，请使用如下改造后的原文件内容：

jQuery.extend({    createUploadIframe: function(id, uri){//create frame            var frameId = 'jUploadFrame' + id;            var iframeHtml = '<iframe id="' + frameId + '" name="' + frameId + '" style="position:absolute; top:-9999px; left:-9999px"';if(window.ActiveXObject){                if(typeof uri== 'boolean'){iframeHtml += ' src="' + 'javascript:false' + '"';                }                else if(typeof uri== 'string'){iframeHtml += ' src="' + uri + '"';                }}iframeHtml += ' />';jQuery(iframeHtml).appendTo(document.body);            return jQuery('#' + frameId).get(0);    },    createUploadForm: function(id, fileElementId, data)      {          //create form              var formId = 'jUploadForm' + id;          var fileId = 'jUploadFile' + id;          var form = jQuery('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');              if (data) {              for ( var i in data) {                  jQuery(                          '<input type="hidden" name="' + i + '" value="'                                  + data[i] + '" />').appendTo(form);              }          }          for (var i = 0; i < fileElementId.length; i ++) {              var oldElement = jQuery('#' + fileElementId[i]);              var newElement = jQuery(oldElement).clone();              jQuery(oldElement).attr('id', fileElementId[i]);              jQuery(oldElement).attr('name', fileElementId[i]);              jQuery(oldElement).before(newElement);              jQuery(oldElement).appendTo(form);          }          //set attributes           jQuery(form).css('position', 'absolute');          jQuery(form).css('top', '-1200px');          jQuery(form).css('left', '-1200px');          jQuery(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, (typeof(s.data)=='undefined'?false: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" );}                    var requestDone = false;        // Create the request object        var xml = {}           if ( s.global )            jQuery.event.trigger("ajaxSend", [xml, s]);        // Wait for a response to come back        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){jQuery.handleError(s, xml, null, e);}            if ( xml || isTimeout == "timeout") {                requestDone = true;                var status;                try {                    status = isTimeout != "timeout" ? "success" : "error";                    // Make sure that the request was successful or notmodified                    if ( status != "error" ){                        // process the data (runs the xml through httpData regardless of callback)                        var data = jQuery.uploadHttpData( xml, s.dataType );                            // If a local callback was specified, fire it and pass it the data                        if ( s.success )                            s.success( data, status );                            // Fire the global callback                        if( s.global )                            jQuery.event.trigger( "ajaxSuccess", [xml, s] );                    } else                        jQuery.handleError(s, xml, status);                } catch(e) {                    status = "error";                    jQuery.handleError(s, xml, status, e);                }                // The request was completed                if( s.global )                    jQuery.event.trigger( "ajaxComplete", [xml, s] );                // Handle the global AJAX counter                if ( s.global && ! --jQuery.active )                    jQuery.event.trigger( "ajaxStop" );                // Process result                if ( s.complete )                    s.complete(xml, status);                jQuery(io).unbind()                setTimeout(function(){try {jQuery(io).remove();jQuery(form).remove();} catch(e) {jQuery.handleError(s, xml, null, e);}}, 100)                xml = null            }        }        // Timeout checker        if ( s.timeout > 0 ) {            setTimeout(function(){                // Check to see if the request is still happening                if( !requestDone ) uploadCallback( "timeout" );            }, s.timeout);        }        try {var form = jQuery('#' + formId);jQuery(form).attr('action', s.url);jQuery(form).attr('method', 'POST');jQuery(form).attr('target', frameId);            if(form.encoding){jQuery(form).attr('encoding', 'multipart/form-data');                  }            else{jQuery(form).attr('enctype', 'multipart/form-data');            }            jQuery(form).submit();        } catch(e) {            jQuery.handleError(s, xml, null, e);        }jQuery('#' + frameId).load(uploadCallback);        return {abort: function () {}};    },    uploadHttpData: function( r, type ) {        alert("type is " + type);        var data = !type;        alert("data1 is " + data);        data = type == "xml" || data ? r.responseXML : r.responseText;        // If the type is "script", eval it in global context        if ( type == "script" )            jQuery.globalEval( data );        // Get the JavaScript object, if JSON is used.        if ( type == "json" ) {            alert("in json,data is " + data);            eval( "data = " + data );        }        // evaluate scripts within html        if ( type == "html" )            jQuery("<div>").html(data).evalScripts();        return data;    }})

2.  相关页面调用例子。(需引入相关JS)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>导入数据应用</title><#include "/views/head.html"/><script>function test() {var baseUrl = "<@full_path path="/"/>";var arrId = [];arrId[0] = "appExcel";arrId[1] = "zipFile";alert("arrId[0] is " + arrId[0] + ",arrId[1] is " + arrId[1]);   $.ajaxFileUpload   (          { url:baseUrl + 'app/test', //你处理上传文件的服务端secureuri:false,fileElementId:arrId,dataType: 'json',success: function (data, status){alert("is success. status is " + status);alert("in success data is " + data.desc);},error: function (data, status, e){     alert("is error. status is " + status + ",and e is " + e);}}    );}function commitInput(){var zipFile = document.getElementById("zipFile");var appExcel = document.getElementById("appExcel");var zipValue=zipFile.value;var appExcelValue=appExcel.value;var zipflag=false;var appExcelflag=false;var zipCheck = document.getElementById("zip");if(appExcelValue != "" && appExcelValue != null){var format = appExcelValue.substr(appExcelValue.lastIndexOf("."));if(format==".xls" || format==".csv" || format == ".xlsx"){document.getElementById("appExcelInfo").innerHTML="";appExcelflag=true;}else{document.getElementById("appExcelInfo").innerHTML="上传的格式不对";}}if(zipCheck.checked==true){if(zipValue != "" && zipValue != null){if(zipValue.substr(zipValue.lastIndexOf("."))==".zip"){document.getElementById("zipInfo").innerHTML="";zipflag=true;}else{document.getElementById("zipInfo").innerHTML="上传的格式不对";}}if(zipflag&&appExcelflag){//$.jBox.close(true);//window.parent.closeBatchApp();setTimeout("window.parent.closeBatchApp()",100);}return zipflag&&appExcelflag;}if(appExcelflag){setTimeout("window.parent.closeBatchApp()",100);//window.parent.closeBatchApp();//return true;}//window.parent.closeBatchApp();alert(appExcelflag);return appExcelflag;}function showZip(){var zipDiv = document.getElementById("showZipInput");var zipCheck = document.getElementById("zip");var isUploadIconValue = document.getElementById("isUploadIcon");if(zipCheck.checked==true){zipDiv.style.display="block";isUploadIconValue.value="true";}else{zipDiv.style.display="none";isUploadIconValue.value="false";}}</script></head><body style="font-size:12px;"><form method="post" name="listForm" id="listForm" action="<@full_path path='app/batchImportApps'/>" enctype="multipart/form-data" onsubmit="return commitInput();"> <#--onclick="return commitInput();"--><div style="margin-left:10%; margin-top:20%;"><table><tr><td align="right"><b style="font-size:14px;">csv或xls的文件:</b><input type="file" id="appExcel" name="appExcel"/><span id="appExcelInfo" style="color:red"></span><input type="checkbox" id="zip" onclick = "showZip();" /><label for="zip"><b style="font-size:14px;">上传zip文件</b></label></td></tr><tr><td aling="center" ><div style="display:none;margin-left:11%;" id="showZipInput"><b style="font-size:14px;">zip文件:</b><input type="file" id="zipFile" name="zipFile"/><span id="zipInfo" style="color:red"></span></div></td></tr><tr><td colspan=2 align="center"><input type="hidden" id="isUploadIcon" name="isUploadIcon" value="false"></td></tr></table></div><div style="margin-left:33%;"><input type="submit" value="确认上传" /><input type="button" value="test" onclick="test()"/><input type="reset" value="重置"/></div></form></body></html>

3。 后台相关JAVA代码

@RequestMapping(value = "/test", method = RequestMethod.POST)public void test(MultipartHttpServletRequest multipartRequest,HttpServletResponse response,HttpServletRequest request) {System.err.println("1234");InputStream appExcelStream = null;try {for (Iterator it = multipartRequest.getFileNames(); it.hasNext();) {          String key = (String) it.next();          MultipartFile imgFile = multipartRequest.getFile(key);          if (imgFile.getOriginalFilename().length() > 0) {              String fileName = imgFile.getOriginalFilename();             System.err.println("filename is " + fileName);            OutputStream out = new FileOutputStream(new File("d://" + fileName));            out.write(imgFile.getBytes());            out.close();        }}    response.setContentType("text/html;charset=UTF-8"); PrintWriter out1 = response.getWriter();FileUploadResp res = new FileUploadResp();res.setResult(0);res.setDesc("success.");out1.write(JSONObject.fromObject(res).toString());} catch (IOException e) {log.error("in batchImportApps,inputstream is null.");}}public static class FileUploadResp {private int result;private String desc;public int getResult() {return result;}public void setResult(int result) {this.result = result;}public String getDesc() {return desc;}public void setDesc(String desc) {this.desc = desc;}}

另：请注意，以上方法在同一个域项目中才可以正常使用。如果页面是通过部署在两个项目并且分属不同域中的话，则无法正常使用AJAX实现的。