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觸發的時候拼接。而不能一次性獲取....