Ajaxを利用して複数画像をドラッグ＆ドロップで一括アップロード #JavaScript

Ajaxを利用して複数画像をドラッグ＆ドロップで一括アップロードするための簡単なメモ。
基本的に画像をPOSTするだけなので、サーバサイドは特別なことをしなくても大丈夫です。

File APIについてはここがわかりやすかったので、是非見てみてください。
http://www.atmarkit.co.jp/ait/articles/1112/16/news135.html

また、このライブラリが便利そうなので、時間がある方はこちらを使った方がいいと思います。
https://github.com/blueimp/jQuery-File-Upload

サンプル

HTML

<html>
<head>
<title>画像をドラッグ＆ドロップで一括アップロード</title>
</head>
<body>

<div id="image_upload_section">
    <div id="drop" style="width:700px; height:150px; padding:10px; border:3px solid" ondragover="onDragOver(event)" ondrop="onDrop(event)">
        ファイルをドラッグアンドドロップしてください。複数ファイル同時も対応しています。
    </div>
</div>

</body>
</html>

JS


<script type="text/javascript">
// File APIに対応していない場合はエリアを隠す
if (!window.File) {
    document.getElementById('image_upload_section').style.display = "none";
}

// ブラウザ上でファイルを展開する挙動を抑止
function onDragOver(event) {
    event.preventDefault();
}

// Drop領域にドロップした際のファイルのプロパティ情報読み取り処理
function onDrop(event) {
    // ブラウザ上でファイルを展開する挙動を抑止
    event.preventDefault();

    // ドロップされたファイルのfilesプロパティを参照
    var files = event.dataTransfer.files;
    for (var i=0; i<files.length; i++) {
        // 一件ずつアップロード
        imageFileUpload(files[i]);
    }
}

// ファイルアップロード
function imageFileUpload(f) {
    var formData = new FormData();
    formData.append('image', f);
    $.ajax({
        type: 'POST',
        contentType: false,
        processData: false,
        url: 'http://example.com/image/upload',
        data: formData,
        dataType: 'json',
        success: function(data) {
            // メッセージ出したり、DOM構築したり。
        }
    });
}
</script>