LoginSignup
18

More than 3 years have passed since last update.

posted at

updated at

Organization

jQueryを使ってajaxでファイル送信

jQueryを使っている状態での方法で書いておくが、基本的に同様の考え方でファイル送信は実装できると思います。
今回は画像データを対象にしているが、基本的に他のファイルでも可能と思われます。

jQueryならonメソッドでフォームがsubmitされたときのイベントを定義します。
ファイルはvar formData = new FormData($(this).get(0));FormDataを生成して、ajaxでそのデータを送ります。

<form action="/upload" method="post" enctype="multipart/form-data" id="imgForm">
  <fieldset>
    <input type="file" name="file" id="sendFile">
    <button type="submit">送信</button>
  </fieldset>
</form>
  // 画像をアップロード
  $('#imgForm').on('submit', function(e) {
    e.preventDefault();
    var formData = new FormData($('#imgForm').get(0));
    $.ajax($(this).attr('action'), {
      type: 'post',
      processData: false,
      contentType: false,
      data: formData,
      success: console.log('send!'); // 送信に成功したとき
    }).done(function(response){
      console.log('succes!');  // レスポンスがあったとき
    }).fail(function() {
       console.log('error!'); // エラーが発生したとき
    });
    return false;
  });

僕が実装したときの都合上不要なタグ等も含まれていますがおそらく問題なく動くと思えます。

参考

https://teratail.com/questions/1607
http://qiita.com/sho012b/items/f2558db5dad97d7e1b1d
http://wp.tech-style.info/archives/619

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
18