Logging

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

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

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

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

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

全体のソースコードはこちらにアクセスしてブラウザのデバッグ機能で見ることが出来ます。
https://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. Logging

      WordPressをnoteへ移行出来る機能が付いたけど。 #試してみた

      おはようございます。WordPressをnoteへ移行出来る機能が付…

    2. data codes through eyeglasses

      Logging

      サーバーを移行しました、行き着く先はここだった。

      おはようございます。先日、一日もかけてサーバーサイドを某サーバーに移…

    3. Logging

      windows10 1809 不具合 Chromeが繋がらない(タイムアウト)

      windows10アップデート後(1809) 不具合 :Chrom…

    4. Logging

      AI(人工知能)とAI(人工知能)が会話する時代に直ぐなる。

      ?この頃、寒い日が続きます。そんな雪が降った日に、こんな記事が流れた…

    5. Logging

      文字化けがモヤモヤした件:Unicodeめ!!とか機種依存文字とかの話。

      文字化けがモヤモヤした件:Unicodeめ!!とか機種依存文…

    2021年10月
     123
    45678910
    11121314151617
    18192021222324
    25262728293031

    カテゴリー

    アーカイブ

    PAGE TOP