打开google 搜索 ‘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. }  

 我后台是用的struts2,strtus2的上传是比较简单的,只要声明约定的名字,即可得到文件对象,和名称,代码如下:

Java代码  

  1. package com.ssy.action;  

  2.   

  3. import com.opensymphony.xwork2.ActionSupport;  

  4. import org.apache.commons.io.FileUtils;  

  5. import org.apache.struts2.util.ServletContextAware;  

  6.   

  7. import javax.servlet.ServletContext;  

  8. import java.io.*;  

  9. import java.text.SimpleDateFormat;  

  10. import java.util.Date;  

  11. import java.util.Random;  

  12.   

  13. /** 

  14.  * Created with IntelliJ IDEA. 

  15.  * User: Administrator 

  16.  * Date: 13-7-2 

  17.  * Time: 下午4:08 

  18.  * To change this template use File | Settings | File Templates. 

  19.  */  

  20. public class Fileupload extends ActionSupport implements ServletContextAware {  

  21.     private File[] gridDoc,caseDoc;  

  22.     private String[] gridDocFileName,caseDocFileName;  

  23.   

  24.     private ServletContext context;  

  25.   

  26.      

  27.   

  28.     public String execute(){  

  29.         for (int i = 0;i<gridDocFileName.length;i++)    {  

  30.             System.out.println(gridDocFileName[i]);  

  31.         }  

  32.         for (int i = 0;i<caseDocFileName.length;i++)    {  

  33.             System.out.println(caseDocFileName[i]);  

  34.         }  

  35.   

  36.   

  37.         //System.out.println(doc1FileName);  

  38.         //System.out.println(doc2FileName);  

  39.         String targetDirectory = context.getRealPath(“/uploadFile”);  

  40.   

  41.        /* 

  42.          *这里我只取得  第一组的文件进行上传,第二组的类似 

  43.         */  

  44.  try{  

  45.             for (int i = 0; i < gridDoc.length; i++) {  

  46.                 String targetFileName = generateFileName(gridDocFileName[i]);  

  47.                 File target = new File(targetDirectory, targetFileName);  

  48.                 FileUtils.copyFile(gridDoc[i], target);  

  49.             }  

  50.         }catch (Exception e){  

  51.             e.printStackTrace();  

  52.         }     

  53.   

  54.         return SUCCESS;  

  55.     }  

  56.   

  57.     public File[] getGridDoc() {  

  58.         return gridDoc;  

  59.     }  

  60.   

  61.     public void setGridDoc(File[] gridDoc) {  

  62.         this.gridDoc = gridDoc;  

  63.     }  

  64.   

  65.     public File[] getCaseDoc() {  

  66.         return caseDoc;  

  67.     }  

  68.   

  69.     public void setCaseDoc(File[] caseDoc) {  

  70.         this.caseDoc = caseDoc;  

  71.     }  

  72.   

  73.     public String[] getGridDocFileName() {  

  74.         return gridDocFileName;  

  75.     }  

  76.   

  77.     public void setGridDocFileName(String[] gridDocFileName) {  

  78.         this.gridDocFileName = gridDocFileName;  

  79.     }  

  80.   

  81.     public String[] getCaseDocFileName() {  

  82.         return caseDocFileName;  

  83.     }  

  84.   

  85.     public void setCaseDocFileName(String[] caseDocFileName) {  

  86.         this.caseDocFileName = caseDocFileName;  

  87.     }  

  88.   

  89.     /** 

  90.      * 用日期和随机数格式化文件名避免冲突 

  91.      * @param fileName 

  92.      * @return 

  93.      */  

  94.     private String generateFileName(String fileName) {  

  95.         System.out.println(fileName);  

  96.         SimpleDateFormat sf = new SimpleDateFormat(“yyMMddHHmmss”);  

  97.         String formatDate = sf.format(new Date());  

  98.         int random = new Random().nextInt(10000);  

  99.         int position = fileName.lastIndexOf(“.”);  

  100.         String extension = fileName.substring(position);  

  101.         return formatDate + random + extension;  

  102.     }  

  103.   

  104. }  

 写到这里,我就有疑问了,之前的大神改的多文件,为什么还是取id,而且后台是怎么取的,我还是没怎么弄明白,我改的这个代码可行么?是不是存在bug呢?这个还有待考验,如果看出问题,请指出,共同学习