2017年9月3日日曜日

FormDataを使ってファイルアップロードとパラメータ渡しを同時に行う方法

ファイルのアップロードとパラメータ渡しを同時に行うのは意外とやりにくい。Formからボタンをクリックして行うのはまだいいとしても、Drag&Dropなど行うには工夫が必要なようだ。

解決方法がこちらにでていた。
https://stackoverflow.com/questions/5512442/input-type-text-value-from-jsp-form-enctype-multipart-form-data-returns-null
これを参考にして パラメータはHashを使ってみた。サーバのほうは、こんな感じです。
 File dirs = new File(path+"tmp");
if (!dirs.exists()) {
   dirs.mkdir();    //make folders
}
FileItemFactory factory = new DiskFileItemFactory();
    ServletFileUpload upload = new ServletFileUpload(factory);

    Iterator<FileItem> iterator = upload.parseRequest(request).iterator();
    HashMap<String,String> map = new HashMap<String,String>();
    String filename="";
    while (iterator.hasNext()) {
   //ファイルはひとつが前提。複数ファイルなら最後のファイル名のみ取得
                   FileItem item = iterator.next();
                   if (!item.isFormField()) {
                      filename= item.getName();
                       item.write(new File(path+"tmp/" + filename));
                   }
                   else {
                     String otherFieldName = item.getFieldName();
                     String otherFieldValue = item.getString();
                     map.put(otherFieldName ,otherFieldValue);
                   }
              }

クライアントのほうは
   var formData = new FormData();
    formData.append('flg','foo');のようにパラメータを追加していく
 
 このFormDataに ドロップされたファイルは
   var files = event.dataTransfer.files;
fd.append('file', files[i]); とするとよいようだ。(iをforなどで処理する。)
 あとは、ファイルもパラメータも一緒にformDataとして非同期でサーバに送ります。
      var uploadURL ="fileupload"; //Upload URL
      $.ajax({
          url: uploadURL,
          type: "POST",
          contentType:false,
          processData: false,
          cache: false,
          data: formData,
          success: function(data){
         ..............というように

0 件のコメント:

コメントを投稿