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>