Struts2+Uploadify实现文件上传

Uploadify是一款很不错的多文件上传jQuery插件,可以为你的网站添加多文件上传功能。

其主要特色是：

1、允许用户一次性选择多个需要上传的文件而无需多次打开文件选择窗口。

2、支持拖拽上传，Uploadify提供了一个基于Html5的jquery插件UploadiFive，用户可以通过拖动文件到相应的位置，从而将文件加入到上传队列中。

3、实时显示上传进度。

4、自定义上传文件类型

5、强大的自定义功能，用户可以通过修改配置，调整文件上传的各种属性

========================================================

下面是我的实现：

1、前台jsp页面（需要导入相应的jquery和uploadify的js文件）

<body>
  	<input id="uploadify" name="uploadFiles" />
  	<div id="uploadifyQueue"></div>
  </body>
  <script type="text/javascript">
  	$(function(){
  		initUploadify();
  	});
  	function initUploadify(){
  		$('#uploadify').uploadify({
  			"buttonText":"选择文件",
  			"debug":false,
  			"method":"post",
  			"fileObjName":"uploadFiles",// important ,this name should be the same as the name in the action 
  			"queueID":"uploadifyQueue",
  			"swf":"../js/uploadify3.2.1/uploadify.swf",
  			"uploader":"<%=basePath%>file/upload.action",
  			"onUploadSuccess" : function(file, data, response) {
  				console.info(data);
  	        }
  		});
  	}
  </script>

2、后台Action

package com.athena.file.action;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.util.List;

import org.apache.log4j.lf5.util.StreamUtils;
import org.apache.struts2.convention.annotation.Action;
import org.apache.struts2.convention.annotation.Namespace;
import org.apache.struts2.convention.annotation.ParentPackage;

import com.athena.core.action.BaseAction;

@ParentPackage("default")
@Namespace("/file")
public class FileAction extends BaseAction {

	private static final long serialVersionUID = 8009346171314814735L;
	/*
	 * 下面的uploadFiles有两点需要注意
	 * 1、必须是List数组
	 * 2、命名必须跟jsp页面中的uploadify的一个参数"fileObjName"一致，否则无法获取到上传的文件
	 */
	public List<File> uploadFiles;
	/*
	 *下面的两个属性为使用Action上传文件所必须的，在前台jsp页面无需做任何操作 
	 */
	public List<String> uploadFilesFileName;
	public List<String> uploadFilesContentType;

	@Action("upload")
	public String upload() {
		if (uploadFiles != null) {
			String folder = getSession().getServletContext().getRealPath("/upload");
			for (int i = 0; i < uploadFiles.size(); i++) {
				try {
					StreamUtils.copy(new FileInputStream(uploadFiles.get(i)), new FileOutputStream(new File(folder
							+ File.separator + uploadFilesFileName.get(i))));
					// FileUtils.copyFileToDirectory(uploadFiles.get(i), new
					// File(folder));
				} catch (IOException e) {
					e.printStackTrace();
				}
			}
		}
		printObject(uploadFilesFileName);
		return NONE;
	}

	public List<File> getUploadFiles() {
		return uploadFiles;
	}

	public void setUploadFiles(List<File> uploadFiles) {
		this.uploadFiles = uploadFiles;
	}

	public List<String> getUploadFilesFileName() {
		return uploadFilesFileName;
	}

	public void setUploadFilesFileName(List<String> uploadFilesFileName) {
		this.uploadFilesFileName = uploadFilesFileName;
	}

	public List<String> getUploadFilesContentType() {
		return uploadFilesContentType;
	}

	public void setUploadFilesContentType(List<String> uploadFilesContentType) {
		this.uploadFilesContentType = uploadFilesContentType;
	}

}

有几个需要注意的地方

1、前台jsp页面

(1)需要一个文件上传的input框，其中的name属性值必须和后台的一样：

<input id="uploadify" name="uploadFiles" />

(2)Uploadify的初始化参数中需要添加fileObjName属性，值与后台的也一样

function initUploadify(){
  		$('#uploadify').uploadify({
  			"buttonText":"选择文件",
  			"debug":false,
  			"method":"post",
  			"fileObjName":"uploadFiles",// important ,this name should be the same as the name in the action 
  			"queueID":"uploadifyQueue",
  			"swf":"../js/uploadify3.2.1/uploadify.swf",
  			"uploader":"<%=basePath%>file/upload.action",
  			"onUploadSuccess" : function(file, data, response) {
  				console.info(data);
  	        }
  		});
  	}

2、后台Action

必须使用数组或者List来存放File对象，即使前台只允许上传一个文件，否则会报错

=====================================================================

目前存在的问题：

1、当上传多个文件的时候，虽然后台采用的是List<File>的方式来接收文件，但Uploadify不会一次性提交全部的数据，而是将多个文件分多次分别提交，选择了5个文件上传，那么它就会请求5次action，每次只有一个文件。而每次完成后都会触发uploadify中的onUploadSuccess事件。

2、由上面而导致的结果就是：如果我上传了5个文件，我想把5个文件上传保存到数据库中的记录id获取到，然后拼接成一个字符串赋值给页面中的某个元素，那么我就只能设置一个全局变量，在每次onUploadSuccess触发的时候拼接。而不能一次性获取....

来源：oschina

链接：https://my.oschina.net/u/1029535/blog/164999

标签

uploadify

Strut2

文件上传

多文件上传

jsp