jQueryでファイルを送信する方法

今回はjQueryを使ってファイル送信をする方法を紹介します。

コード

function file_upload(){
   var fd = new FormData();
   fd.append('upload_file', $('#file')[0].files[0]);
   $.ajax({
     url:'/url/',
     type:'post',
     data: fd,
     processData: false,
     contentType: false,
     cache: false,
   }).done(function (data) {
     $('#file').val('');
     alert("成功しました！")
   }).fail(function() {
     $('#file').val('');
     alert("失敗しました")
   });
}

file_upload関数が実行されるとidにfileが指定されているファイルフォームのデータが取得されurlに送信されるようになっています。

バックグラウンドではnameに”upload_file”を指定することで取得できます。

参考サイト

[JavaScript] Ajaxでファイルをアップロード【jQuery使用】 - Qiita

jQuery の ajax() を用いたファイルのアップロード方法です。 ⇒ jQuery を使わない方法はこちらHTMLHTML <form id="my_form"> <input type...

qiita.com