読者です 読者をやめる 読者になる 読者になる

jQueryでAjaxでファイルアップロード

JavaScript メモ

昔、諦めたんだけど、実はできたんだね。FormDataを使えばいいらしい。
※ 使用したjQueryは1.8.3。


ひとまず、こんなformを書いて

<form id="hogeForm" method="post" action="/hoge/upload" enctype="multipart/form-data">
  <div><input type="file" name="hogeFile"></div>
  <div>ファイルの説明:<input type="text" name="hogeText"></div>
  <input id="hogeSubmit" type="submit" value="うpする">
</form>

js側はこんな感じで

$(function(){
  $("#hogeForm").submit(function(){
    var $form, fd;
    $form = $(this);
    fd = new FormData($form[0]);
    $.ajax($form.attr("action"), {
      type: 'post',
      processData: false,
      contentType: false,
      data: fd,
      dataType: 'html',
      success: function(data){
        console.log(data);
      }
    });
    return false;
  });
});

以上おしまい。
サーバー側はよしなに作ればいい。

processData: falseとcontentType: falseが鍵らしい。