Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What is going on with this article?
@zuid

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

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

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

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

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への出し入れと、ブラウザへの描画の部分を修正すれば、意図した通り画像ファイルの取り込みをドラッグ&ドロップで実現できます。

2
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
zuid

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
2
Help us understand the problem. What is going on with this article?