Struts 2+Uploadifyによるファイルアップロード

5607 ワード

ファイルアップロード jsp uploadify strut 2 複数ファイルアップロード

Uploadifyは良いマルチファイルアップロードjQueryプラグインで、あなたのサイトにマルチファイルアップロード機能を追加することができます.
主な特徴は次のとおりです.
1、ユーザーが一度に複数のアップロードするファイルを選択することを許可し、何度もファイル選択ウィンドウを開く必要がない.
2、ドラッグアップロードをサポートし、UploadifyはHtml 5ベースの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>

、バックグラウンドアクション

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);
  	        }
  		});
  	}

、バックグラウンドアクション
アレイまたはListを使用してFileオブジェクトを保存する必要があります.フロントでファイルのアップロードが許可されている場合でも、エラーが発生します.
=====================================================================
現在の問題:
1、複数のファイルをアップロードする場合、バックグラウンドではList方式でファイルを受信しているが、Uploadifyは全てのデータを一括してコミットするのではなく、複数のファイルを複数回に分けてそれぞれコミットし、5つのファイルをアップロードするように選択すると、毎回1つのファイルだけを5回actionに要求する.完了するたびにuploadifyのonUploadSuccessイベントがトリガーされます.
2、以上の結果、5つのファイルをアップロードした場合、5つのファイルをデータベースに保存したレコードidにアップロードして取得し、1つの文字列にパッチしてページの要素に付与すると、onUploadSuccessがトリガーされるたびにパッチするグローバル変数しか設定できません.一度に取得することはできません....

type=fileでvalue値が取得されないことを解決

WEBフロントエンド学習:HTML学習_iframeラベルとcanvasラベル