jquery-and-file-upload

fukayatsu Advent Calendar 2013 - 10日目

jQueryでformを作らずにfileをuploadしたかったので、
大体こんな感じのコードを書いた。

<input type="file" id="file_to_upload">

var formData = new FormData();
formData.append('file', $('#file_to_upload')[0].files[0]);
formData.append('foo', 'bar');

$.ajax({
  type: 'POST',
  url: '/server/uploader',
  data: formData,
  contentType: false,
  processData: false,
  success: function(data){
    console.log(data);
  }
});

注意すべきはcontentType: falseとprocessData: falseで、
これらを指定しないとjQueryがデフォルト値を使ってしまってエラーになる。

あと、IE10未満だとFormDataクラスは使えないようだ。

参考