ajaxfileupload多文件上传 - 修复只支持单个文件上传的bug

搜索：

jquery ajaxFileUpload

AjaxFileUpload同时上传多个文件

原生的AjaxFileUpload插件是不支持多文件上传的，通过修改AjaxFileUpload少量代码就能实现多文件同时上传

AjaxFileUpload插件修复前代码

  1 jQuery.extend({
  2     createUploadIframe: function(id, uri)
  3     {
  4         //create frame
  5         var frameId = 'jUploadFrame' + id;
  6         var iframeHtml = '<iframe id="' + frameId + '" name="' + frameId + '" style="position:absolute; top:-9999px; left:-9999px"';
  7         if(window.ActiveXObject)
  8         {
  9             if(typeof uri== 'boolean'){
 10                 iframeHtml += ' src="' + 'javascript:false' + '"';
 11 
 12             }
 13             else if(typeof uri== 'string'){
 14                 iframeHtml += ' src="' + uri + '"';
 15 
 16             }    
 17         }
 18         iframeHtml += ' />';
 19         jQuery(iframeHtml).appendTo(document.body);
 20 
 21         return jQuery('#' + frameId).get(0);            
 22     },
 23     createUploadForm: function(id,fileElementId,data,fileElement)
 24     {
 25         //create form    
 26         var formId = 'jUploadForm' + id;
 27         var fileId = 'jUploadFile' + id;
 28         var form = jQuery('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');    
 29         if(data)
 30         {
 31             for(var i in data)
 32             {
 33                 jQuery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form);
 34             }            
 35         }
 36         var oldElement;
 37         if(fileElement == null)
 38             oldElement = jQuery('#' + fileElementId);
 39         else
 40             oldElement = fileElement;
 41         
 42         var newElement = jQuery(oldElement).clone();
 43         jQuery(oldElement).attr('id', fileId);
 44         jQuery(oldElement).before(newElement);
 45         jQuery(oldElement).appendTo(form);
 46         
 47         //set attributes
 48         jQuery(form).css('position', 'absolute');
 49         jQuery(form).css('top', '-1200px');
 50         jQuery(form).css('left', '-1200px');
 51         jQuery(form).appendTo('body');        
 52         return form;
 53     },
 54 
 55     ajaxFileUpload: function(s) {
 56         // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout        
 57         s = jQuery.extend({}, jQuery.ajaxSettings, s);
 58         var id = new Date().getTime()        
 59         var form = jQuery.createUploadForm(id, s.fileElementId, (typeof(s.data)=='undefined'?false:s.data),s.fileElement);
 60         var io = jQuery.createUploadIframe(id, s.secureuri);
 61         var frameId = 'jUploadFrame' + id;
 62         var formId = 'jUploadForm' + id;        
 63         // Watch for a new set of requests
 64         if ( s.global && ! jQuery.active++ )
 65         {
 66             jQuery.event.trigger( "ajaxStart" );
 67         }            
 68         var requestDone = false;
 69         // Create the request object
 70         var xml = {}   
 71         if ( s.global )
 72             jQuery.event.trigger("ajaxSend", [xml, s]);
 73         // Wait for a response to come back
 74         var uploadCallback = function(isTimeout)
 75         {            
 76             var io = document.getElementById(frameId);
 77             try 
 78             {                
 79                 if(io.contentWindow)
 80                 {
 81                      xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null;
 82                      xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;
 83                      
 84                 }else if(io.contentDocument)
 85                 {
 86                      xml.responseText = io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null;
 87                     xml.responseXML = io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document;
 88                 }                        
 89             }catch(e)
 90             {
 91                 jQuery.handleError(s, xml, null, e);
 92             }
 93             if ( xml || isTimeout == "timeout") 
 94             {                
 95                 requestDone = true;
 96                 var status;
 97                 try {
 98                     status = isTimeout != "timeout" ? "success" : "error";
 99                     // Make sure that the request was successful or notmodified
100                     if ( status != "error" )
101                     {
102                         // process the data (runs the xml through httpData regardless of callback)
103                         var data = jQuery.uploadHttpData( xml, s.dataType );    
104                         // If a local callback was specified, fire it and pass it the data
105                         if ( s.success )
106                             s.success( data, status );
107     
108                         // Fire the global callback
109                         if( s.global )
110                             jQuery.event.trigger( "ajaxSuccess", [xml, s] );
111                     } else
112                         jQuery.handleError(s, xml, status);
113                 } catch(e) 
114                 {
115                     status = "error";
116                     jQuery.handleError(s, xml, status, e);
117                 }
118 
119                 // The request was completed
120                 if( s.global )
121                     jQuery.event.trigger( "ajaxComplete", [xml, s] );
122 
123                 // Handle the global AJAX counter
124                 if ( s.global && ! --jQuery.active )
125                     jQuery.event.trigger( "ajaxStop" );
126 
127                 // Process result
128                 if ( s.complete )
129                     s.complete(xml, status);
130 
131                 jQuery(io).unbind()
132 
133                 setTimeout(function()
134                                     {    try 
135                                         {
136                                             jQuery(io).remove();
137                                             jQuery(form).remove();    
138                                             
139                                         } catch(e) 
140                                         {
141                                             jQuery.handleError(s, xml, null, e);
142                                         }                                    
143 
144                                     }, 100)
145 
146                 xml = null
147 
148             }
149         }
150         // Timeout checker
151         if ( s.timeout > 0 ) 
152         {
153             setTimeout(function(){
154                 // Check to see if the request is still happening
155                 if( !requestDone ) uploadCallback( "timeout" );
156             }, s.timeout);
157         }
158         try 
159         {
160 
161             var form = jQuery('#' + formId);
162             jQuery(form).attr('action', s.url);
163             jQuery(form).attr('method', 'POST');
164             jQuery(form).attr('target', frameId);
165             if(form.encoding)
166             {
167                 jQuery(form).attr('encoding', 'multipart/form-data');                  
168             }
169             else
170             {    
171                 jQuery(form).attr('enctype', 'multipart/form-data');            
172             }            
173             jQuery(form).submit();
174 
175         } catch(e) 
176         {            
177             jQuery.handleError(s, xml, null, e);
178         }
179         
180         jQuery('#' + frameId).load(uploadCallback);
181         return {abort: function(){
182             try
183             {
184                 jQuery('#' + frameId).remove();
185                 jQuery(form).remove();
186             }
187             catch(e){}
188         }};
189     },
190 
191     uploadHttpData: function( r, type ) {
192         var data = !type;
193         data = type == "xml" || data ? r.responseXML : r.responseText;
194         
195         // If the type is "script", eval it in global context
196         if ( type == "script" )
197             jQuery.globalEval( data );
198         // Get the JavaScript object, if JSON is used.
199         if ( type == "json" )
200             eval( "data = " + data );
201         // evaluate scripts within html
202         if ( type == "html" )
203             jQuery("<div>").html(data).evalScripts();
204 
205         return data;
206     },
207     
208     handleError: function( s, xml, status, e ) {
209         // If a local callback was specified, fire it
210         if ( s.error )
211             s.error( xml, status, e );
212 
213         // Fire the global callback
214         if ( s.global )
215             jQuery.event.trigger( "ajaxError", [xml, s, e] );
216     }
217 });

AjaxFileUpload插件修复后代码

  1 jQuery.extend({
  2     createUploadIframe: function(id, uri)
  3     {
  4         //create frame
  5         var frameId = 'jUploadFrame' + id;
  6         var iframeHtml = '<iframe id="' + frameId + '" name="' + frameId + '" style="position:absolute; top:-9999px; left:-9999px"';
  7         if(window.ActiveXObject)
  8         {
  9             if(typeof uri== 'boolean'){
 10                 iframeHtml += ' src="' + 'javascript:false' + '"';
 11 
 12             }
 13             else if(typeof uri== 'string'){
 14                 iframeHtml += ' src="' + uri + '"';
 15 
 16             }    
 17         }
 18         iframeHtml += ' />';
 19         jQuery(iframeHtml).appendTo(document.body);
 20 
 21         return jQuery('#' + frameId).get(0);            
 22     },
 23     createUploadForm: function(id,fileElementId,data,fileElement)
 24     {
 25         //create form    
 26         var formId = 'jUploadForm' + id;
 27         var fileId = 'jUploadFile' + id;
 28         var form = jQuery('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');    
 29         if(data)
 30         {
 31             for(var i in data)
 32             {
 33                 jQuery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form);
 34             }            
 35         }
 36         for (var i = 0; i < fileElementId.length; i ++) {
 37             var oldElement = jQuery('#' + fileElementId[i]);
 38             var newElement = jQuery(oldElement).clone();
 39             jQuery(oldElement).attr('id', fileElementId[i]);
 40             jQuery(oldElement).attr('name', fileElementId[i]);
 41             jQuery(oldElement).before(newElement);
 42             jQuery(oldElement).appendTo(form);
 43         }
 44         
 45         //set attributes
 46         jQuery(form).css('position', 'absolute');
 47         jQuery(form).css('top', '-1200px');
 48         jQuery(form).css('left', '-1200px');
 49         jQuery(form).appendTo('body');        
 50         return form;
 51     },
 52 
 53     ajaxFileUpload: function(s) {
 54         // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout        
 55         s = jQuery.extend({}, jQuery.ajaxSettings, s);
 56         var id = new Date().getTime()        
 57         var form = jQuery.createUploadForm(id, s.fileElementId, (typeof(s.data)=='undefined'?false:s.data),s.fileElement);
 58         var io = jQuery.createUploadIframe(id, s.secureuri);
 59         var frameId = 'jUploadFrame' + id;
 60         var formId = 'jUploadForm' + id;        
 61         // Watch for a new set of requests
 62         if ( s.global && ! jQuery.active++ )
 63         {
 64             jQuery.event.trigger( "ajaxStart" );
 65         }            
 66         var requestDone = false;
 67         // Create the request object
 68         var xml = {}   
 69         if ( s.global )
 70             jQuery.event.trigger("ajaxSend", [xml, s]);
 71         // Wait for a response to come back
 72         var uploadCallback = function(isTimeout)
 73         {            
 74             var io = document.getElementById(frameId);
 75             try 
 76             {                
 77                 if(io.contentWindow)
 78                 {
 79                      xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null;
 80                      xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;
 81                      
 82                 }else if(io.contentDocument)
 83                 {
 84                      xml.responseText = io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null;
 85                     xml.responseXML = io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document;
 86                 }                        
 87             }catch(e)
 88             {
 89                 jQuery.handleError(s, xml, null, e);
 90             }
 91             if ( xml || isTimeout == "timeout") 
 92             {                
 93                 requestDone = true;
 94                 var status;
 95                 try {
 96                     status = isTimeout != "timeout" ? "success" : "error";
 97                     // Make sure that the request was successful or notmodified
 98                     if ( status != "error" )
 99                     {
100                         // process the data (runs the xml through httpData regardless of callback)
101                         var data = jQuery.uploadHttpData( xml, s.dataType );    
102                         // If a local callback was specified, fire it and pass it the data
103                         if ( s.success )
104                             s.success( data, status );
105     
106                         // Fire the global callback
107                         if( s.global )
108                             jQuery.event.trigger( "ajaxSuccess", [xml, s] );
109                     } else
110                         jQuery.handleError(s, xml, status);
111                 } catch(e) 
112                 {
113                     status = "error";
114                     jQuery.handleError(s, xml, status, e);
115                 }
116 
117                 // The request was completed
118                 if( s.global )
119                     jQuery.event.trigger( "ajaxComplete", [xml, s] );
120 
121                 // Handle the global AJAX counter
122                 if ( s.global && ! --jQuery.active )
123                     jQuery.event.trigger( "ajaxStop" );
124 
125                 // Process result
126                 if ( s.complete )
127                     s.complete(xml, status);
128 
129                 jQuery(io).unbind()
130 
131                 setTimeout(function()
132                                     {    try 
133                                         {
134                                             jQuery(io).remove();
135                                             jQuery(form).remove();    
136                                             
137                                         } catch(e) 
138                                         {
139                                             jQuery.handleError(s, xml, null, e);
140                                         }                                    
141 
142                                     }, 100)
143 
144                 xml = null
145 
146             }
147         }
148         // Timeout checker
149         if ( s.timeout > 0 ) 
150         {
151             setTimeout(function(){
152                 // Check to see if the request is still happening
153                 if( !requestDone ) uploadCallback( "timeout" );
154             }, s.timeout);
155         }
156         try 
157         {
158 
159             var form = jQuery('#' + formId);
160             jQuery(form).attr('action', s.url);
161             jQuery(form).attr('method', 'POST');
162             jQuery(form).attr('target', frameId);
163             if(form.encoding)
164             {
165                 jQuery(form).attr('encoding', 'multipart/form-data');                  
166             }
167             else
168             {    
169                 jQuery(form).attr('enctype', 'multipart/form-data');            
170             }            
171             jQuery(form).submit();
172 
173         } catch(e) 
174         {            
175             jQuery.handleError(s, xml, null, e);
176         }
177         
178         jQuery('#' + frameId).load(uploadCallback);
179         return {abort: function(){
180             try
181             {
182                 jQuery('#' + frameId).remove();
183                 jQuery(form).remove();
184             }
185             catch(e){}
186         }};
187     },
188 
189     uploadHttpData: function( r, type ) {
190         var data = !type;
191         data = type == "xml" || data ? r.responseXML : r.responseText;
192         
193         // If the type is "script", eval it in global context
194         if ( type == "script" )
195             jQuery.globalEval( data );
196         // Get the JavaScript object, if JSON is used.
197         if ( type == "json" )
198             eval( "data = " + data );
199         // evaluate scripts within html
200         if ( type == "html" )
201             jQuery("<div>").html(data).evalScripts();
202 
203         return data;
204     },
205     
206     handleError: function( s, xml, status, e ) {
207         // If a local callback was specified, fire it
208         if ( s.error )
209             s.error( xml, status, e );
210 
211         // Fire the global callback
212         if ( s.global )
213             jQuery.event.trigger( "ajaxError", [xml, s, e] );
214     }
215 });

多文件上传实例

js代码

 1 //上传账单
 2 function uploadBill(){
 3     var clincId=$("#clCode").val();
 4     var phoneNo=$("#phone-number").val();
 5     var telreg = /^(((1))+\d{10})$/;
 6     var clincDate=$("#clinic-time").val();
 7     clincDate = clincDate.replace(/\//g,"-");
 8     var spendAmount=$("#total-sum").val();
 9     var params = {"clincId":clincId, "phoneNo":phoneNo, "clincDate":clincDate, "spendAmount":spendAmount};
10     var files = new Array();
11     files.push('file1');//文件input id1
12     files.push('file2');//文件input id2
13     var jc = $.confirm({
14         content: '上传中...',
15         title: '提示',
16         confirmButton: false,
17         cancelButton: false,
18         closeIcon: false
19     });
20     $.ajaxFileUpload({
21         url : contextPath + '/auth/uploadBill',// 调取上传到本地的方法
22         secureuri : false,
23         async : true,
24         fileElementId : files,
25         type : 'post',
26         dataType : 'json',
27         data : params,
28         success : function(data, status) {
29             if(data.status == 'success'){
30                     jc.close();
31                     remind("上传成功，等待审核");
32             }
33         },
34         error : function(data, status, e) {
35             jc.close();
36             remind("上传失败!");
37         }
38     });
39 }

java代码

 1     /**
 2      * 上传账单
 3      * @return
 4      * @throws Exception
 5      */
 6     @SuppressWarnings("unused")
 7     @RequestMapping("/uploadBill")
 8     @ResponseBody
 9     public void uploadBill(HttpServletRequest request, HttpServletResponse response) throws Exception {
10         
11         MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
12         List<MultipartFile> uploadFiles = new ArrayList<>();
13         Map parameterMap = multipartRequest.getParameterMap();
14         Map<String,String> responseMap = new HashMap<>();
15         Map<String, String> params = new HashMap<>();
16         Set<String> keySet = parameterMap.keySet();
17         for (String key : keySet) {
18             String[] values = (String[])parameterMap.get(key);
19             params.put(key, values[0]);
20         }
21         ClientUser userInfo = getUserInfo();
22         params.put("openid", userInfo.getOpenid());
23         //用户就诊记录校验，通过预约记录进行匹配校验
24         //TODO
25         
26         //支持同时上传多个文件
27         Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();
28         Collection<MultipartFile> files = fileMap.values();
29         uploadFiles.addAll(files);
30         StringBuffer originalImageUrl = new StringBuffer();
31         StringBuffer compressImageUrl = new StringBuffer();
32         for (MultipartFile multipartFile : uploadFiles) {
33             if (!multipartFile.isEmpty()) {
34                 String originalFilename = multipartFile.getOriginalFilename();
35                 while(originalFilename.length() > 30){//剪切文件名，防止过长
36                     originalFilename = originalFilename.substring(20, originalFilename.length());
37                 }
38                 String generateName = FileUtils.getGenerateFileName(originalFilename);
39                 String fileDir = "C:/upload/clinic/bill/";
40                 String filePath = fileDir + generateName;
41                 originalImageUrl.append(filePath+",");
42                 File file = new File(filePath);
43                 File dirFile = new File(filePath);
44                 if (!dirFile.exists()) {
45                     dirFile.mkdirs();
46                 }
47                 multipartFile.transferTo(file);
48                 String compressImgPath = filePath.replace(".", "_CompressImg.");
49                 compressImageUrl.append(compressImgPath+",");
50                 //将图片进行压缩，手机端展示压缩后的图片，同时保留原图在管理端审核展示
51                 FileUtils.compressImg(filePath, compressImgPath, 0.5f);
52             }
53         }
54         params.put("imageUrl", originalImageUrl.substring(0, originalImageUrl.length()-1));
55         params.put("compressImageUrl", compressImageUrl.substring(0, compressImageUrl.length()-1));
56         insurFacade.saveBill(params);
57         responseMap.put("status", "success");
58         responseMap.put("msg", "");
59         response.setContentType("text/html;charset=utf-8");
60         response.setHeader("Cache-Control", "no-cache");
61         PrintWriter out = response.getWriter();
62         out.print(JsonUtils.toJsonString(responseMap));
63     }