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();
});
Ajax送信時にオプションとしてprocessData:falseを指定しなくては行けないので注意してくてください。こうすることでFile APIで取得したファイルをサーバーに送信することができます。
関連エントリー
jQuery基礎文法最速マスター
jQueryを良くする25のTIPS
14のjQueryベストプラクティス
8のjQueryのすごいTIPS
Re:初心者のコーダーでも簡単に実装出来るJavaScript/jQuery Tips
スポンサードリンク
«jQueryでdrag & drop | メイン | 【Code match】クリエイターのための就業プログラムのご案内»