記録

ブラウザに画像をドロップして表示させる部分的な処理(javascript)。これを使って😃

本日はブログを更新するのがいつもよりかなり遅めです😃、2000記事を超えてからネタが尽きているようにも思いますが、何とか毎日更新出来ています。ネタが尽きたら少し充電しようかなと思います。

ブラウザに画像をドロップして表示させる部分的な処理(javascript)

さて、ブラウザに画像をドロップして表示させる部分的な処理(javascript)を作りました。これらを使ってちょっとしたサービスを作っています。まだ完成はしていませんが完成できたらこちらで紹介しようと思っています。尚、部分的な処理なのでドロップしても画像をサーバーに保存させたりすることはないです。

ソースコードはこちらになります。

全体のソースコードはこちらにアクセスしてブラウザのデバッグ機能で見ることが出来ます。
https://www.zip358.com/tool/demo43/

        var obj_input = document.createElement("input");
        obj_input.type = "file";
        obj_input.accept = "image/png,image/jpeg";
        var element = document.getElementById("dropArea");
        element.addEventListener("dragover", function(e) {
            e.preventDefault();
            this.classList.add("dragover");
        });
        element.addEventListener("dragleave", function(e) {
            e.preventDefault();
            this.classList.remove("dragover");
        });
        element.addEventListener("drop", function(e) {
            e.preventDefault();
            element.classList.remove("dragover");
            if (/\.((png)|(jpeg)|(jpg))/i.test(e.dataTransfer.files[0].name) === true) {
                var obj = element;
                obj.innerHTML = e.dataTransfer.files[0].name;
                var imgfiles = e.dataTransfer.files;
                obj_input.files = imgfiles;
                var fr = new FileReader();
                fr.readAsDataURL(obj_input.files[0]);
                fr.onload = function() {
                    obj.style.backgroundImage = "url(" + fr.result + ")";
                    obj.style.backgroundSize = "cover";
                };
            }
        });

活動支援よろしくお願いします

Windows11を入れてみたよ。違和感、操作性どう?前のページ

吉井和哉 – みらいのうた|原点回帰👍次のページ

関連記事

  1. 記録

    WordPress:仕事の現場でサッと使える!デザイン教科書。

    【Wordpress:仕事の現場でサッと使える!デザイン教科書】をぱ…

  2. 記録

    高知竜馬空港の近くにある前浜と吉川の間に行ってきたよ。

    高知県の前浜という場所に朝っぱらから行ってきました。高知県の飛行場…

  3. 記録

    仁淀川町観光協会の対応がいい加減な件?それとも?

    仁淀川町観光協会.tvの対応がいい加減な件。仁淀川町観光協会のリス…

  4. 記録

    ヒキコモリストのお姉さんが!

    ヒキコモリストのお姉さんこと、小森ひき子さん(YOUTUBER)は賢…

  5. 記録

    量子コンピュータへシフト出来ない理由。

    量子コンピュータへシフト出来ない理由。何故、一般の人達が量子コンピ…

  6. 記録

    これからの記事をいろいろと読むと。

    これからの記事をいろいろと読むと共通点は副業や個人という言葉を目に…

PAGE TOP