28日 9月 2016

Ajaxでドラッグ＆ドロップのファイルアップロード

よく見かけるドラッグアンドドロップでファイルをアップロードする方法を試してみた。

画面側での実装を記載しておく。

もちろん、サーバー側でアップロードのリクエストを処理する必要はあるが、ここでは割愛する。

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>

JavaScript(jQueryは使える前提)

<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>

カテゴリ： yoshizawa, Javascript, yoshipon