How to use AjaxFileUpload to upload multiple files

这次给大家带来怎么用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发送异步请求

The above is the detailed content of How to use AjaxFileUpload to upload multiple files. For more information, please follow other related articles on the PHP Chinese website!