ドラッグアンドドロップでファイルアップロード

最近のWebサービスではブラウザ上にファイルをドロップするだけでファイルをアップロードできるという画期的な仕組みがあります。あれを実現してみようと思い立ち、調べてみました。

upload

結論から言うと、こんな感じにするみたいです。

<!DOCTYPE HTML>
<html>
<head>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <title>ファイルアップロード</title>
</head>
<body>
<div id="file_upload_section">
    <div id="drop" style="width:380px; height:100px; padding:10px; border:3px solid;" ondragover="onDragOver(event)" ondrop="onDrop(event)">
        ファイルをドラッグアンドドロップしてください。
    </div>
</div>
</body>
</html>

<script type="text/javascript">
// ブラウザ上でファイルを展開する挙動を抑止
function onDragOver(event) {
    event.preventDefault();
}

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

    // ドロップされたファイルのfilesプロパティを参照
    var files = event.dataTransfer.files;
    if (files.length == 1) {
        alert(files[0].name + ":" + files[0].size);
        FileUpload(files[0]);
    }
}

// ファイルアップロード
function FileUpload(f) {
    var formData = new FormData();
    formData.append('file', f);
    $.ajax({
        type: 'POST',
        dataType : "text",
        contentType: false,
        processData: false,
        url: 'upload.php',
        data: formData,
        success: function(data) {
            alert(data);
        }
    });
}
</script>

PHP側は通常のアップロード方法と同じです。
$_FILES変数にファイル情報がセットされてきます。

システム開発

Posted by @erestage