複数のコンポーネント

説明

ページ上で複数のコンポーネントを同時に使用することができます。

1回の転送コマンドですべてのコンポーネントのファイルをアップロードするには、upload関数を使って1つずつアップロードを開始し、onDX5UploadCompletedイベントが発生したら、次のコンポーネントのupload関数を呼び出して順次アップロードすればよい。しかし、これに加えて、アップロードするファイルを集めて一気にアップロードする方法もある。

<!-- 2つのコンポーネントを保持するコンテナの定義 -->
<div id="dext5-container-a" style="width:500px; height:200px;"></div>
<div id="dext5-container-b" style="width:500px; height:200px;"></div>
<!-- 実際のアップロードを担当するコンポーネントを保持するコンテナの定義 -->
<!-- アップローダは、見えにくいように1pxのコンテナとして定義します。 -->
<div id="dext5-container-uploader" style="width:1px; height:1px;"></div>

コンポーネントを定義します。

dx5.create({ id: "dext5-a", parentId: "dext5-container-a", btnFile: "btn-add-files-to-a" });
dx5.create({ id: "dext5-b", parentId: "dext5-container-b", btnFile: "btn-add-files-to-b" });
dx5.create({ id: "dext5-uploader", parentId: "dext5-container-uploader" });

ファイルをアップロードする場合は、2つのコンポーネントからアップロードする項目を取得し、uploader(dext5-uploader)に登録し、uploaderがアップロードを試みます。

var uploader = dx5.get("dext5-uploader");
			
uploader.clearItems();

// 最初のコンポーネントからアップロードするファイル項目を取得します。
uploader.setUploableFilesFrom(dx5.get("dext5-a"));
// 2番目のコンポーネントからアップロードするファイル項目を取得します。
uploader.setUploableFilesFrom(dx5.get("dext5-b"));

uploader.setUploadURL("アップロードパス");
uploader.upload("AUTO");

サーバー上では、DEXTUploadX5_ControlIdフォーム名を使用して、アップロードされたファイルがどのコンポーネントに属するかを識別できます。

List<FileItem> items = dextnj.getFileItems();
// DEXTUploadX5_ControlIdフォーム名を使用します。
List<FormItem> controls = dextnj.getFormItems("DEXTUploadX5_ControlId");
...
FormItem ctr = null;
for (int i = 0; i < items.size(); i++) {  
	ctr = controls.get(i);  
	...	
	if (file.isEmpty() == false) {
		...
		sb.append(String.format("%1$s|%2$s|%3$s\n", ctr.getValue(), ...));
	}
}

例

ファイルアップロード Aエリア (ID: dext5-a)

ファイル追加

ファイルアップロードBエリア (ID: dext5-b)

ファイル追加

アップロード