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