Ajaxを利用してファイルアップロードする。

今回はFormDataを利用してファイルをアップロードする。
FormData は XMLHttpRequest Level 2 でサポートされたもので、Ajaxでの値の送信をより簡単な物にしてくれる。

FormDataの使い方

FormDataの使い方は簡単で、new して append するだけ。
値をappendした FormData オブジェクトは、ajaxのdataにセットするだけ。

FormDataについては以下を参照

FormData – Web API リファレンス | MDN

FormData オブジェクトの利用 – Web developer guide | MDN

FormData でファイルの送信をする

FormData は、Ajaxを使ったファイルアップロードも簡単に書ける。

こんな感じの簡単なformを作る。

<form id="content" action="">
  <input type="file" name="hogeFile">
  <input type="submit" value="send">
</form>

jsはajaxを使ってファイルを送信するのでこんな感じ。
今回の例は、fileフィールドが変更された場合に即座にアップロードする。

$("#content").on("change", 'input[type="file"]', function(e){
	e.preventDefault();
	var formData = new FormData();
	var files = this.files;
	$.each(files, function(i, file){
		formData.append('file', file);
	});
	$.ajax({
		url: '/sample/',
		type: 'post',
		data: formData,
		processData: false,
		contentType: false,
		dataType: 'html',
		complete: function(){},
		success: function(res) {}
	})
});

（サーバー側は省略）

これだけでajaxを使ってファイルのアップロードが出来る。

contentTypeとprocessData

contentTypeとprocessDataはかならずfalseにすること。

contentTypeはサーバにデータを送信する際に用いるcontent-typeヘッダの値だが、ajaxのリクエストがFormDataの場合には適切なcontentTypeになるため、こちらで指定する必要はないので必ずfalseにすること。

また、processDataも同じくfalseにします。これは、dataに指定したオブジェクトをクエリ文字列に変換するかどうかを設定する箇所で、ファイルを送信する場合には必要ないのでfalseに設定する。

FormDataが使えなかった時はかなりかなり手間がかかっていましたが、FormDataが使えることで簡単に書けるようになりましたよと。

jQuery最高の教科書
posted with ヨメレバ
株式会社シフトブレイン SBクリエイティブ 2013-11-27
Kindle

HTML5＋CSS3の新しい教科書　基礎から覚える、深く理解できる。[Kindle版]
posted with ヨメレバ
赤間 公太郎,原 一宣。 エムディエヌコーポレーション（MdN） 2013-10-18
Kindle