ブラウザに画像をドロップして表示させる部分的な処理（javascript）。これを使って?
2021.10.07
本日はブログを更新するのがいつもよりかなり遅めです?、2000記事を超えてからネタが尽きているようにも思いますが、何とか毎日更新出来ています。ネタが尽きたら少し充電しようかなと思います。
さて、ブラウザに画像をドロップして表示させる部分的な処理（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";
};
}
});
著者名
@taoka_toshiaki
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
2000, createElement, document, inp, input, javascript, obj, quot, var, アクセス, かなり, コード, こちら, こと, これ, これら, サーバー, サービス, ソース, デバッグ, ドロップ, ネタ, ブラウザ, ブログ, 保存, 充電, 全体, 処理, 完成, 少し, 更新, 本日, 機能, 毎日, 画像, 紹介, 表示, 記事,