jquery ajaxFileupload多文件上传插件内核延伸

我需要实现多个文件上传，之前的做法是定义多个不同id的input，然后把ajaxfileuplod方法放在for循环里(问题是我需要一次性提交多张图片不是循环上传多张图片，于是这个方法就不能满足实际业务需求了)，直接改源码（因为作者好久没有跟新了，也确实满足不了要求了）。接下来看看我是怎么改的。

引用网上的做法：

1，看没有修改前的代码

Js代码  

1. var oldElement = jQuery('#' + fileElementId);  
2. var newElement = jQuery(oldElement).clone();  
3. jQuery(oldElement).attr('id', fileId);  
4. jQuery(oldElement).before(newElement);  
5. jQuery(oldElement).appendTo(form);  

 

很容易看出，这个就是把id为什么的input加到from里去，那么要实现多个文件上传，就改成下面的样子：

Js代码  

1. if(typeof(fileElementId) == 'string'){  
2.     fileElementId = [fileElementId];  
3. }  
4. for(var i in fileElementId){  
5.     var oldElement = jQuery('#' + fileElementId[i]);  
6.     var newElement = jQuery(oldElement).clone();  
7.     jQuery(oldElement).attr('id', fileId);  
8.     jQuery(oldElement).before(newElement);  
9.     jQuery(oldElement).appendTo(form);  
10. }  

 这样改之后，初始化的代码就要这么写：

Js代码  

1. $.ajaxFileUpload({  
2.     url:'/ajax.php',  
3.     fileElementId:['id1','id2']//原先是fileElementId:’id’ 只能上传一个  
4. });  

 到这里，确实可以上传多个文件，但是对于我来说新问题又来，多个id，我的界面的文件不是固定的，是动态加载的，那么id要动态生成，我觉得太麻烦，为什么不取name呢？然后把以上代码改为如下：

Js代码  

1. if(typeof(fileElementId) == 'string'){  
2.            fileElementId = [fileElementId];  
3.        }  
4.        for(var i in fileElementId){  
5.            //按name取值  
6.            var oldElement = jQuery("input[name="+fileElementId[i]+"]");  
7.            oldElement.each(function() {  
8.                var newElement = jQuery($(this)).clone();  
9.                jQuery(oldElement).attr('id', fileId);  
10.                jQuery(oldElement).before(newElement);  
11.                jQuery(oldElement).appendTo(form);  
12.            });  
13.        }  

 这样改了 那么就可以实现多组多个文件上传，接下来看我是怎么应用的。

html：

Html代码  

1. <div>  
2.               <img id="loading" src="scripts/ajaxFileUploader/loading.gif" style="display:none;">  
3.              
4.                   <table cellpadding="0" cellspacing="0" class="tableForm" id="calculation_model">  
5.                       <thead>  
6.                       <tr>  
7.                           <th>多组多个文件</th>  
8.                       </tr>  
9.                       </thead>  
10.                       <tbody>  
11.                       <tr>  
12.                           <td>第一组</td>  
13.                           <td>第二组</td>  
14.                       </tr>  
15.                       <tr>  
16.                           <td><input type="file"  name="gridDoc" class="input"></td>  
17.                           <td><input type="file" name="caseDoc" class="input"></td>  
18.                       </tr>  
19.                       </tbody>  
20.                       <tfoot>  
21.                       <tr>  
22.                           <td><button class="button" id="up1">Upload</button></td>  
23.                           <td><button class="button" id="addInput" >添加一组</button></td>  
24.                       </tr>  
25.                       </tfoot>  
26.                   </table>  
27.           </div>  

 js:

Js代码  

1. /** 
2.  * Created with IntelliJ IDEA. 
3.  * User: Administrator 
4.  * Date: 13-7-3 
5.  * Time: 上午9:20 
6.  * To change this template use File | Settings | File Templates. 
7.  */  
8. $(document).ready(function () {  
9.     $("#up1").click(function(){  
10.         var temp = ["gridDoc","caseDoc"];  
11.         ajaxFileUpload(temp);  
12.     });  
13.   
14.     $("#addInput").click(function(){  
15.         addInputFile();  
16.     });  
17.   
18. });  
19.   
20. //动态添加一组文件  
21. function addInputFile(){  
22.     $("#calculation_model").append(" <tr>"+  
23.         "<td><input type='file'  name='gridDoc' class='input'></td>   "+  
24.         "<td><input type='file' name='caseDoc' class='input'></td> "+  
25.         "</tr>");  
26. }  
27.   
28.   
29. //直接使用下载下来的文件里的demo代码  
30. function ajaxFileUpload(id)  
31. {  
32.     //starting setting some animation when the ajax starts and completes  
33.     $("#loading").ajaxStart(function(){  
34.             $(this).show();  
35.         }).ajaxComplete(function(){  
36.             $(this).hide();  
37.         });  
38.   
39.     /* 
40.      prepareing ajax file upload 
41.      url: the url of script file handling the uploaded files 
42.      fileElementId: the file type of input element id and it will be the index of  $_FILES Array() 
43.      dataType: it support json, xml 
44.      secureuri:use secure protocol 
45.      success: call back function when the ajax complete 
46.      error: callback function when the ajax failed 
47.  
48.      */  
49.     $.ajaxFileUpload({  
50.             url:'upload.action',  
51.             //secureuri:false,  
52.             fileElementId:id,  
53.             dataType: 'json'  
54.         }  
55.     )  
56.   
57.     return false;  
58.   
59. }