jQuery file uploadのformDataにハマる

jQuery file uploadは、複数ファイルをドラッグ＆ドロップでサーバにアップロードできるスクリプトです。画像ファイルだとアップロードした画像のサムネイルを自動で作成してくれたりもするスグレモノです。

今回、ファイルアップロードと同時にフォームの値も渡そうとしたときにハマったことがあったのでメモしておきます。

ファイルアップロードと同時にフォームの値を渡すには、formDataというオプションを使います。

参考　オプション一覧

$('#fileupload').fileupload({
  formData: { form_key : 'form_val'}
});

フォームの変数全てを渡すのならserializeArray()を使います。

$('#fileupload').fileupload({
  formData: $("#formId").serializeArray()
});

今回ハマったのは、

<form id="formId">
<select name=hoge>
<option value=1>値1</option>
<option value=2>値2</option>
</select>
</form>

のようなフォームで、selectした値を渡したいとき、値2を選択しているにもかかわらず、値1がサーバに送られてくるということです。

調べた結果、原因は、

$('#fileupload').fileupload({
  formData: $("#formId").serializeArray()
});

のようにすると、このスクリプトが実行された時点でのフォームの値（selectなら一番上の値）をバインドするからでした。
正しくは、アップロードが開始した時点でフォームの値をバインドするようにする必要があります。具体的には、以下のような感じです。

$('#fileupload').fileupload();

$('#fileupload').bind('fileuploadsubmit', function (e, data) {
  data.formData = $("#formId").serializeArray();
});

こんな記事もおすすめ

関連記事