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

説明

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

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

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

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

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

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

このサンプルは、ファイルアップロード処理のコントローラ（FileServiceControllerクラス）で処理され、common-upload.doにマッピングされている。

RFC1867のプロトコルによると、multipart/form-dataで送信されたデータはPOST形式で受信する必要があります。FileServiceControllerクラスのcommonuploadメソッドでは、DEXTUploadNJMultipartResovlerで処理されたファイル情報を持つVOクラスを使用してサーバー側のアップロード処理が実行される。

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

# サーバーサイド					
						
@RequestMapping(value = {"/service/common-upload.do", "/service/upload-oraf.do"}, method = RequestMethod.POST)
public void commonupload(DEXTUploadX5Request x5, HttpServletResponse response) throws IOException {
	
  // DEXTUploadX5Requestは、Springモデルバインディングによってフォームデータを持つVOクラスです。
	
  FileItem item = null;
  StringBuffer sb = new StringBuffer();

  for (MultipartFile file : x5.getDEXTUploadX5_FileData()) {

    item = (FileItem)file;

    if (item.isEmpty() == false) {
      item.save();

      // レスポンス・データ・バッファに保存されたファイルの場所を書き込みます。
      sb.append(String.format("F:%1$s\n", item.getFilename()));
    }
  }

  response.setCharacterEncoding("UTF-8");
  response.setContentType("text/plain");
  response.getWriter().write(sb.toString());
}

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

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

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

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

説明

例