複数のファイルをドラッグ＆ドロップで一気にアップロードするページ、
実はけっこう簡単に作れます。Ajaxを使えばページ遷移も不要です。
（一部jQueryを使用しています）
まずはHTML側にドロップさせる場所を作ります。
|
1 2 3 4 5 6 7 |
<div id="upload_area"> <div id="drop_area" style="background-color:#f0f0f0;width:100%;height:200px;padding:10px;border:2px solid #808080;border-radius:5px;" ondragover="dragover(event);" ondrop="drop(event);"> この枠内にファイルをドラッグ＆ドロップしてください。 <br/> 複数のファイルを選択すれば一度にアップロードできます。 </div> </div> |
ドラッグ時とドロップ時には関数を呼ぶようにしておきます。
次にその関数をJavaScriptで定義します。
ドラッグ中にブラウザの機能をキャンセルさせます。
|
1 2 3 |
var dragover = function(e) { e.preventDefault(); }; |
ドロップされたらファイルを取り出してアップロード関数を呼びます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
var upload_cnt = 0; var drop = function(e) { // ブラウザの機能をキャンセルします e.preventDefault(); // ファイルを取り出します var files = e.dataTransfer.files; upload_cnt = 0; file_num = files.length; // 1件ずつアップロード関数を呼びます for (var i = 0; i < files.length; i++) { ajax_upload(files[i]); } }; |
アップロード関数です。
（エラー処理などは割愛し要点だけ簡単に記述します）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
var ajax_upload = function(file) { var form_data = new FormData(); form_data.append('file', file); var func = function() { upload_cnt++; if(file_num == upload_cnt) { alert('アップロードが完了しました'); } }; $.ajax({ type: 'POST', url: '（アップロード処理を行うサーバー側のURL）', data: form_data, success: func }); }; |
対応していないブラウザのための処理をロード時に呼びましょう。
|
1 2 3 |
if(!window.File) { $('upload_area').html('対応していません'); } |