記録

ブラウザに画像をドロップして表示させる部分的な処理(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. 記録

    認知度高めテイコウペンギン、YOUTUBEが苦笑wwww。

    認知度高めテイコウペンギン、YOUTUBEが苦笑してしまうぐら…

  2. 記録

    C#SFTPでダウンロードするプログラムの作り方。

    C#SFTPでダウンロードするプログラムの作り方。いろいろ調べた結…

  3. 記録

    高知県立美術館でチームラボ展がやっていたので見に行った、おまけに透明標本展も見ましたよ。

    「高知県立美術館でチームラボ展がやっていたので見に行った、おまけに透…

  4. 記録

    ping送信はエラー吐きまくり。

    FC2ブログ http://ping.fc2.comTechnor…

  5. 記録

    ノーコードって流行っているけど。

    https://www.youtube.com/watch?v=p…

  6. 記録

    大体だ。あらため大胆でもない事。

    https://twitter.com/zip358com/stat…

2021年10月
 123
45678910
11121314151617
18192021222324
25262728293031

カテゴリー

PAGE TOP