最も簡単な方法でファイルをアップロードする

ホーム > Basic examples > 例02

説明

dx5.create関数でコンポーネントを作成する際、btnUploadAutoプロパティにボタン要素(input [type = button])のIDを指定すると、自動的にアップロード機能が呼び出されるイベントに接続します。 

<button id="btn-upload">アップロード</button>
<script>
dx5.create({
	...
	// アップロードを実行するボタンをリンクする
	btnUploadAuto: "btn-upload"
});
</script>

ファイルをアップロードするには、アップロードを処理するサーバー側のウェブパスを設定する必要があります。

ファイルのアップロードパスはアップロード前に設定できますが、通常はonDX5Createdコールバック関数で指定します。

function onDX5Created(id) {
	var dx = dx5.get(id);
	// dx5.canonicalizeは、与えられた相対パスの絶対パス（httpとhttpsを含む）を返すユーティリティ関数です。
	dx.setUploadURL(dx5.canonicalize("./simple-upload.do"));
}

DEXTUploadX5はファイルを送信する送信者として動作する。一方、DEXTUploadNJはサーバー側でファイルを受信するレシーバーとして動作します。

このサンプルは、ファイルアップロード処理のサーブレット（CommonFileUploadクラス）によって処理され、web.xmlのcommon-upload.doにマッピングされます。

RFC1867のプロトコルによれば、multipart/form-dataで送られたデータはPOSTメソッドで受け取らなければならない。CommonFileUploadクラスのdoPostメソッドでDEXTUploadNJのFileUploadクラスを利用してサーバー側アップロード処理を行う。

DEXTUploadNJの詳しい機能や説明についてはDEXTUploadNJ製品マニュアルとサンプルを参照してください。

# サーバーサイド					
						
FileUpload dextnj = null;
		
try {
	// HTTPリクエストオブジェクトとコンフィギュレーションオブジェクトを引数として受け取るFileUploadオブジェクトを作成する。
	dextnj = new FileUpload(request, env);
	
	// クライアントからのファイルデータ部分をすべて一時ファイルとして保存します。
	// 一時保存場所はEnvironment#setTempRepositoryメソッドで設定します。
	dextnj.prepare();
	
	// FileUpload#getFileItemメソッドでフォーム名で呼び出すこともできますが、getFileItemsメソッドでコレクションオブジェクトを取得します。
	List<FileItem> items = dextnj.getFileItems();
	
	// 応答データを書き込むためのバッファ。
	StringBuffer sb = new StringBuffer();
	
	for (FileItem next : items) {
		if (next.isEmpty() == false) {
			// アイテムが正しいファイルであれば、一時的な場所からターゲットにファイルを保存（コピーまたは移動）します。
			// 引数として与えられたディレクトリパスがない場合、ターゲットは Environment#setDefaultRepository メソッドで設定されたパスになります。
			next.save();
			
			// 保存されたファイルの場所をレスポンスデータバッファに書き込む。
			sb.append(String.format("A: %1$s\n", next.getLastSavedFilePath()));
		}
	}
	
	// レスポンス・データの作成。
	response.setCharacterEncoding("UTF-8");
	response.setContentType("text/plain");
	response.getWriter().write(sb.toString());

} catch (Exception e) {
	// 問題が発生した場合は、エラーを発生させる必要があります。
	// 例外を処理したくない場合は、"response.sendError(HttpServletResponse.SC_INTERNAL_SERVER_ERROR);"を使用して、HTTPステータスコードをエラーとして送信する必要があります。
	throw new ServletException(e);
} finally {
	// リソースを削除します。
	// 削除されていない一時ファイルはすべて削除されます。
	if (dextnj != null) dextnj.close();
}

DEXTUploadX5はブラウザではありません。したがってサーバーとDEXTUploadX5間の通信は応答データを介してのみ送受信できる。

DEXTuploadX5は応答データのHTTPステータスコードにエラーがある場合のみonDX5Errorコールバック関数を呼び出します。

アップロードが正常に完了すると、onDX5UploadCompletedコールバック関数が呼び出されます。

function onDX5UploadCompleted(id) {
  // アップロードが完了すると呼び出されます。
}

例