ajax 上傳多個文件

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>');      
        //使ajaxfileupload支持增長附加參數.  
        if(data){  
            for(var i in data){  
                jQuery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form);  
            }             
        }         
        //ajaxFileupload默認是隻能上傳一個文件,替換以下代碼地實現多個文件上傳.  
        if (typeof(fileElementId) == 'string') {  
          fileElementId = [fileElementId];  
        }  
       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);  
      
      }  
      /*var oldElement = jQuery('#' + fileElementId); 
      var newElement = jQuery(oldElement).clone(); 
      jQuery(oldElement).attr('id', fileId); 
      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 ) {  
        var data = !type;  
        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" )  
            //針對ajaxfileupload返回json帶<pre>標籤解,  
            //決方案爲將eval( "data = " + data );換成data = jQuery.parseJSON(jQuery(data).text());  
            //eval( "data = " + data );  
            data = jQuery.parseJSON(jQuery(data).text());  
        // evaluate scripts within html  
        if (type == "html" )  
            jQuery("<div>").html(data).evalScripts();  
  
        return data;  
    },  
      
    //針對ajaxfileupload.js結合低版本jquery報異常:TypeError: jQuery.handleError is not a function,添加以下代碼.  
    handleError: function( s, xhr, status, e )      {    
        // If a local callback was specified, fire it  
        if ( s.error ) {    
            s.error.call( s.context || s, xhr, status, e );    
        }    
        // Fire the global callback    
        if ( s.global ) {    
            (s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] );    
        }    
    }   
});  

ajax請求：

$.ajaxFileUpload({
                                url: "LeadingUser/protocol.do", 
                                secureuri: false,  
                                fileElementId: [$("#doc").attr("id"),$("#img").attr("id"),$("#imgs").attr("id")], 
                                dataType: 'json',
                                data:{userId:L.data.userId},
                                success: function (re){  
                                          alert(re+"  ------");   
                                },error:function(e){
                                    console.log(e);
                                }
                            })

後臺代碼：

參數：@RequestParam(value="file", required = true) MultipartFile[] file

file對應input的name  全部input同一個name