<input type=”file”>で選択された画像をimgタグで表示するサンプルコードです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<p>↓画像ファイルを選択します。</p>
<input type="file" id="target" accept="image/*">
<p>↓ここに選択された画像を表示します。</p>
<img id="myImage">
<script src="load.js"></script>
</body>
</html>
<input type=”file” id=”target”>で選択された画像をid=”MyImage”のimgに表示します。
const target = document.getElementById('target');
target.addEventListener('change', function (e) {
const file = e.target.files[0]
const reader = new FileReader();
reader.onload = function (e) {
const img = document.getElementById("myImage")
img.src = e.target.result;
}
reader.readAsDataURL(file);
}, false);