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