File APIとAjax

このエントリーはjQuery Advent Calendar 2013の 8日目のエントリーです。(Advent Calendarとは様々なテーマを12/1〜12/25までリレー形式でブログなどに執筆する企画です。)

前回はdrag & dropでFileオブジェクトを取得する方法を解説しましたが、このままではサーバーサイドとの連携ができません。ですので、今回はAjaxを利用してFileオブジェクトをサーバーサイドに送信する方法について解説を行ないます。

そのままでは送信できませんので、 new FormData()を利用しFormDataオブジェクトを作成し、FormData.append()で送信内容を作成してAjax送信を行ないます。

$(".dnd").on("drop",function(e){
	e.preventDefault();
	var fd = new FormData();
	for(var i = 0;i<e.originalEvent.dataTransfer.files.length ;i++){
		fd.append("file", e.originalEvent.dataTransfer.files[i]);
	}
	$.ajax({
		url: "upload.php",
		type: "POST",
		data: fd,
		processData: false,
		success:function(){
			alert("ok")
		}
	});
});
$(".dnd").on("dragover",function(e){
	e.preventDefault();
});

サンプル1

Ajax送信時にオプションとしてprocessData:falseを指定しなくては行けないので注意してくてください。こうすることでFile APIで取得したファイルをサーバーに送信することができます。

関連エントリー

jQuery基礎文法最速マスター
jQueryを良くする25のTIPS
14のjQueryベストプラクティス
8のjQueryのすごいTIPS
Re:初心者のコーダーでも簡単に実装出来るJavaScript/jQuery Tips

スポンサードリンク

«jQueryでdrag & drop | メイン | 【Code match】クリエイターのための就業プログラムのご案内»