JavaScriptでドロップされた画像をimgタグで表示する
ドロップされた画像をimgタグで表示するサンプルコードです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="target" style="border: solid 1px #0000ff; height: 3em;text-align: center;">
ここに画像ファイルをドロップします。
</div>
<p>↓ここにドロップされた画像を表示します。</p>
<img id="myImage">
<script src="drop.js"></script>
</body>
</html>
id=”target”の領域にドロップされた画像をid=”MyImage”のimgに表示します。
const handleDragEvent = function (e) {
e.preventDefault();
e.stopPropagation();
e.dataTransfer.dropEffect = 'copy';
};
const target = document.getElementById("target");
target.addEventListener("dragover", handleDragEvent, false);
target.addEventListener("drop", function (e) {
e.stopPropagation();
e.preventDefault();
const file = e.dataTransfer.files[0]
const reader = new FileReader();
reader.onload = function (e) {
const img = document.getElementById("myImage")
img.src = e.target.result;
}
reader.readAsDataURL(file);
}, false);
e.dataTransfer.dropEffect = ‘copy’; は、マウスカーソルを変更するためのコードです。
なくても動作しますが、ブラウザによっては、ドロップできないような印象を与えるため、追加しています。