AjaxFileUpload+Struts2实现多文件上传功能

下面就来详细讲解如何使用AjaxFileUpload和Struts2实现多文件上传功能。

环境说明

• Struts2版本：2.5.20
• AjaxFileUpload版本：1.1
• JDK版本：1.8

准备工作

1. 下载AjaxFileUpload插件，将其解压到项目中的WebRoot目录下的js文件夹中。

2. 引入AjaxFileUpload插件：

```html

```

1. 配置Struts2项目支持文件上传：

在struts.xml文件中添加以下代码段：

xml
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="104857600"/>
<property name="defaultEncoding" value="utf-8"/>
</bean>

实现文件上传功能

1. 在页面中放置文件上传控件：

html
<input id="fileupload" type="file" name="uploadfile" multiple="true">

这里可能需要注意的是，multiple属性要设置为true，以支持多文件上传。

1. 编写jQuery代码：

javascript
$(function(){
$("#fileupload").on("change",function(){
$.ajaxFileUpload({
url:'uploadFile.action',//上传的服务器地址
secureuri:false,//是否启用安全提交，默认为false
fileElementId:'fileupload',//要上传的文件控件ID
dataType: 'json',//服务器返回的数据类型
success: function (data, status){ //上传成功后的回调方法
//更新页面等操作
},
error: function (data, status, e){ //上传失败后的回调方法
//更新页面等操作
}
});
});
});

这段代码中，需要将url属性设置为文件上传处理的Action地址。

1. 编写文件上传Action：

```java
public class FileUploadAction extends ActionSupport {
private List uploadfile;
private List uploadfileFileName;
private List uploadfileContentType;

   public String upload() throws Exception {
       if (uploadfile != null) {
           for (int i = 0; i < uploadfile.size(); i++) {
               File file = uploadfile.get(i);
               String fileName = uploadfileFileName.get(i);
               String fileType = uploadfileContentType.get(i);
               //执行文件上传操作
               //...
           }
       }
       return SUCCESS;
   }

   //getter和setter方法

}
```

在文件上传Action中，需要添加三个List类型的属性，分别用于存储上传的文件、文件名和文件类型。同时，在方法中还需要进行文件上传相关的操作，例如将文件保存到服务器等。

1. 在struts.xml文件中配置Action：

xml
<action name="uploadFile" class="com.example.action.FileUploadAction" method="upload">
<interceptor-ref name="defaultStack"/>
<result name="success">success.jsp</result>
<result name="error">error.jsp</result>
</action>

至此，使用AjaxFileUpload和Struts2实现多文件上传功能的攻略已经完成。下面再分别给出两条具体的示例：

示例1

在控制层中，可以使用FileUtils.copyFile()方法将上传的文件直接保存到服务器：

public String upload() throws Exception {
    if (uploadfile != null) {
        for (int i = 0; i < uploadfile.size(); i++) {
            File file = uploadfile.get(i);
            String fileName = uploadfileFileName.get(i);
            String fileType = uploadfileContentType.get(i);
            String savePath = "D:\\upload\\" + fileName;
            FileUtils.copyFile(file, new File(savePath));
        }
    }
    return SUCCESS;
}

示例2

在视图层中，可以在上传成功后显示上传的文件：

$(function(){
     $("#fileupload").on("change",function(){
          $.ajaxFileUpload({
               url:'uploadFile.action',
               secureuri:false,
               fileElementId:'fileupload',
               dataType: 'json',
               success: function (data, status){
                     var files = data.files;
                     //显示上传的文件
                     for(var i=0;i<files.length;i++){
                         var file = files[i];
                         var fileName = file.fileName;
                         var fileType = file.fileType;
                         var src = file.src;
                         $("#filelist").append("<img src='"+src+"' >");
                     }
               },
               error: function (data, status, e){
                      //更新页面等操作
               }
          });
     });
});

在文件上传成功后，服务器返回的数据中会包含上传的文件信息。我们可以从返回的数据中取出文件信息，然后使用JavaScript在页面上显示出来。

至此，两条示例都已经介绍完毕。如果需要实现多图片上传的功能，也是可以参照以上方法的思路进行实现的。