Struts2+Uploadify实现文件上传

时间 2019-11-11

标签 struts2+uploadify struts uploadify 实现文件上传栏目 Struts 繁體版

原文原文链接

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

其主要特点是： html

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

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

三、实时显示上传进度。数据库

四、自定义上传文件类型 apache

五、强大的自定义功能，用户能够经过修改配置，调整文件上传的各类属性数组

======================================================== jquery插件

下面是个人实现： jsp

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

<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>

二、后台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有两点须要注意
	 * 一、必须是List数组
	 * 二、命名必须跟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;
	}

}

有几个须要注意的地方

一、前台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);
  	        }
  		});
  	}

二、后台Action

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

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

目前存在的问题：

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

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