ファイルのアップロードとパラメータ渡しを同時に行うのは意外とやりにくい。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 件のコメント:
コメントを投稿