複数のコンポーネント

説明

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

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<MultipartFile> items = x5.getDEXTUploadX5_FileData();
// DEXTUploadX5_ControlIdフォーム名を使用します。
List<String> controls = x5.getDEXTUploadX5_ControlId();
...
for (int i = 0, len = items.size(); i < len; i++) {
	ctr = controls.get(i);
	...	
	if (file.isEmpty() == false) {
		...
		sb.append(String.format("%1$s|%2$s|%3$s\n", ctr, ...));
	}
}

例

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

ファイルを追加する

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

ファイルを追加する

アップロード