Ajaxでファイルアップロード、そして・・・

Strutsを使ってファイルアップロードするという話があって、ちょいと調べたのでメモ。

Strutsのファイルアップロード

Strutsからファイルアップロードをする場合、ActionFormにFormFileクラスのプロパティを用意するのが一番手っ取り早そうだ。

■ActionForm側

public class FileUploadForm extends ActionForm{

  private FormFile file;

  /**
   * @return file
   */
  public FormFile getFile() {
    return file;
  }

  /**
   * @param file セットする file
   */
  public void setFile(FormFile file) {
    this.file = file;
  }
}

こんな感じ。これで、基本的にはファイルが受け取れる。

ただ、今回は画面Aで画像を選択して、確認ボタンを押下すると、モーダルダイアログを起動して、画像を表示するという仕様らしく（えらく古い仕様だ・・）

この調査中にshowModalDialogがすでに廃止された仕様であることが発覚して、どうしたものか思っているところでもある・・・ｗ

さて、そんな仕様のため、単純にフォームからPOSTするとうわけにもいかず。

※showModalDialogにはPOSTできないらしい。

そこで思いついたのが、確認ボタン時にAjaxで画像だけ先行してアップロードしちゃって、そのあとJavaScriptで画像ファイル名なんかを引数にモーダルを開くって方法。

調べてみたら、JQueryでAjaxで画像がアップロードできるらしいじゃないか。

で、以下がそのコード。

■JavaScript
$(function() {
  $("input[name='upload']").click(function(){
    // ファイルアップロードのデータ生成
    var formData = new FormData();
    if ($("input[name='file']").val()!== '') {
      formData.append( "file", $("input[name='file']").prop("files")[0] );
    }
    // AJAX通信
    $.ajax({
      url : "/StrutsSample/fileUpload.do",
      type : "POST",
      data : formData,
      processData : false,
      contentType : false,
      dataType: "json",
      success : function(result) {
        // ここに、showModalDialogを記述して、画像パスを渡せば、いけんじゃね？
        alert(result.linkString);
      },
      error : function(xml,status,etc) {
      }
    });
  });
});

■HTML

<form action="" method="post">
  <input type="file" name="file">
  <input id="text" type="hidden" value="hoge">
  <input type="button" name="upload" value="アップロード">
</form>

 肝になるのは、contentType:false と processData: falseらしい。

なお、以下のようにすれば、ファイル以外も同時にあげれるらしい。

  // 追加データ
  formData.append("text",$("#text").val());

 しかし、いまさらshowModalDialogを使うのも、悩みどころ。

【後日談：2018/04/30】

最終的にはshowModalDialogでなくてもいいということになった。ほかの機能でできないと判断されたらしく、普通にJavaScriptでpostすることになった。

その際にIEだけうまくいかないという風に言われたが、特に問題なく稼働している・・謎ｗ