怎麼用AjaxFileUpload實作多檔案上傳

这次给大家带来怎么用AjaxFileUpload实现多文件上传，用AjaxFileUpload实现多文件上传的注意事项有哪些，下面就是实战案例，一起来看一下。

本文重点给大家介绍AjaxFileUpload+Struts2实现多文件上传功能，具体实现代码大家参考下本文。

单文件和多文件的实现区别主要修改两点，

一是插件ajaxfileupload.js里接收file文件ID的方式

二是后台action是数组形式接收

1、ajaxFileUpload文件下载地址http://www.phpletter.com/Demo/AjaxFileUpload-Demo/

2、引入jquery-1.8.0.min.js、ajaxFileUpload.js文件

3、文件上传页面核心代码

      

        多文件上传      

                                                                                

    <script> function fileUpload() { var files = [&#39;file1&#39;,&#39;file2&#39;,&#39;file3&#39;]; //将上传三个文件 ID 分别为file2,file2,file3 $.ajaxFileUpload( { url : &#39;fileUploadAction&#39;, //用于文件上传的服务器端请求地址 secureuri : false, //一般设置为false fileElementId : files, //文件上传的id属性 <input type="file" id="file" name="file" /> dataType : &#39;json&#39;, //返回值类型 一般设置为json success : function(data, status) { var fileNames = data.fileFileName; //返回的文件名 var filePaths = data.filePath; //返回的文件地址 for(var i=0;i<data.fileFileName.length;i++){ //将上传后的文件 添加到页面中 以进行下载 $("#down").after("<tr><td height=&#39;25&#39;>"+fileNames[i]+ "<td><a href=&#39;downloadFile?downloadFilePath="+filePaths[i]+"&#39;>下载") } } }) } </script>

以上fileElementId属性接收的files参数为['file1','file2','file3']

由于是多文件,所以我们需要修改ajaxfileupload.js 找到以下代码

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

修改为：

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);  
}

4、文件上传Action

public class FileAction { 
  private File[] file;       //文件  
  private String[] fileFileName;  //文件名   
  private String[] filePath;    //文件路径 
  private String downloadFilePath; //文件下载路径 
  private InputStream inputStream;  
  /** 
   * 文件上传 
   * @return 
   */ 
  public String fileUpload() { 
    String path = ServletActionContext.getServletContext().getRealPath("/upload"); 
    File file = new File(path); // 判断文件夹是否存在,如果不存在则创建文件夹 
    if (!file.exists()) { 
      file.mkdir(); 
    } 
    try { 
      if (this.file != null) { 
        File f[] = this.getFile(); 
        filePath = new String[f.length]; 
        for (int i = 0; i <p style="text-align: left;">5、struts配置</p><pre class="brush:php;toolbar:false">nbsp;struts PUBLIC  
  "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" 
  "http://struts.apache.org/dtds/struts-2.0.dtd"> 
<struts> 
  <package> 
    <!-- 文件上传 --> 
    <action> 
      <result> 
        <param>text/html 
      </result> 
    </action> 
  </package> 
  <package> 
    <!-- 文件下载 -->    
    <action>   
      <result>   
         <param>application/octet-stream   
         <param>inputStream   
         <param>attachment;filename=${fileName}   
         <param>4096   
      </result>   
    </action>  
  </package> 
</struts>

浏览器中输入：http://localhost:8080/struts_ajaxfileupload/index.jsp  即可进行文件上传

如图：

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Ajax和jsonp在项目中的实战总结

只需四步即可实现ajax发送异步请求

以上是怎麼用AjaxFileUpload實作多檔案上傳的詳細內容。更多資訊請關注PHP中文網其他相關文章！