画像ファイルをドラッグ＆ドロップでブラウザのアプリケーションに取り込ませる方法

画像ファイルをドラッグ＆ドロップでブラウザのアプリケーションに取り込ませる方法を調べました。

例えば、以下のような写真をカレンダー形式で管理するアプリケーションを作るとして、画像ファイルをドラッグ＆ドロップで表示できれば便利かと思います。

JavaScriptだけを使った簡易な実装方法と、PHPを使ったきちんとした（つもりの）実装方法の２パターンを書きます。

1.JavaScriptだけで実装

calender.html

<table>
    <tr>
        <td id="box1">ボックス1</td>
        <td id="box2">ボックス2</td>
    </tr>
</table>

drag_drop.js

$(function () {
    $("td").on('dragover', function (e) {
        e.stopPropagation();
        e.preventDefault();
    });

    $("td").on('drop', function (e) {
        e.stopPropagation();
        e.preventDefault();

        var boxid = $(this).attr("id");
        var items  = e.originalEvent.dataTransfer.items;
        var file = items[0].getAsFile();
        var reader = new FileReader();
        reader.readAsDataURL(file);

        reader.onloadend = function() {
            $("#" + boxid).append("<img src=" + reader.result + " width=130>");
        };
    });
});

このコードでたしかに画像をブラウザに表示させることはできるのですが、画像を保存できないため、実用上はあまり意味がないものです。

aタグに画像を挿入し、aタグのDownload属性を使ってダウンロードフォルダに格納することも試したのですが、使い勝手はあんまり良くなかったです。

2.PHPを使って実装

calender.html

<table>
    <tr>
        <td id="box1"> ボックス1 <?php if ($box == "box1") { print("<img src=\"" . $data . "\" width=130>"); } ?></td>
        <td id="box2"> ボックス2 <?php if ($box == "box2") { print("<img src=\"" . $data . "\" width=130>"); } ?></td>
    </tr>
</table>

drag_drop.js

$(function () {
    $("td").on('dragover', function (e) {
        e.stopPropagation();
        e.preventDefault();
    });

    $("td").on('drop', function (e) {
        e.stopPropagation();
        e.preventDefault();

        var boxid = $(this).attr("id");
        var items  = e.originalEvent.dataTransfer.items;
        var file = items[0].getAsFile();
        var reader = new FileReader();
        reader.readAsDataURL(file);

        reader.onloadend = function() {
            $("#" + boxid).append("<form id=\"upload" + boxid + "\" action=\"calender.php\" method=\"POST\"></form>")
            $("#upload" + boxid).append("<input type=\"hidden\" name=\"day\" value=\"" + boxid + "\">");
            $("#upload" + boxid).append("<input type=\"hidden\" name=\"data\" value=\"" + reader.result + "\">");
            var form = $("#upload" + boxid);
            form.submit();
        };
    });
});

calender.php

function get_post_data($key) {
    $str = '';
    if (isset($_POST[$key]) === TRUE) {
        $str = $_POST[$key];
    }
    return $str;
}

$box = "";
$data = "";

if ($_SERVER['REQUEST_METHOD'] === "POST") {
    $box = get_post_data('box');
    $data = get_post_data('data');
}

include_once "calender.html";

これで画像をブラウザに表示させることができます。

あとは画像データのDBへの出し入れと、ブラウザへの描画の部分を修正すれば、意図した通り画像ファイルの取り込みをドラッグ＆ドロップで実現できます。