JavaScriptで<input type=”file”>で選択された画像をimgタグで表示する

<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);

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください