(Sample)

FileReader.readAsDataURL()を使い、以下のように書くことで画像をプレビュー表示させることができます。

<!DOCTYPE html>
<html>
    <head>
        <title>preview.html</title>
        <meta charset="UTF-8">
        <style>
            #img > img{
                width: 200px;
            }
        </style>
<body>
    <!-- 画像ファイルを選択するための入力要素を設定します。
         accept属性により、ファイル選択ダイアログで画像ファイルのみが表示されます。
         multiple属性により、ユーザーが複数のファイルを選択できます。
         onchange属性により、選択したファイルが変更されるたびに指定したJavaScript関数が呼び出されます。 -->
    <input type="file" accept='image/*' multiple="multiple" onchange="preview(this);">

    <!-- 選択した画像のプレビューを表示するためのdiv要素を設定します。 -->
    <div id="img"></div>

    <script>
        // 選択した画像ファイルのプレビューを生成する関数を定義します。
        function preview(obj) {
            // 選択した全てのファイルに対してループ処理をします。
            for (i = 0; i < obj.files.length; i++) {
                // FileReaderオブジェクトを作成します。これによりブラウザ上でファイルを読み込むことが可能になります。
                let fileReader = new FileReader();
                // onloadイベントハンドラを設定します。ファイルが正常に読み込まれたときに呼び出されます。
                fileReader.onload = ((e)=> {
                    // 読み込んだ画像ファイルをData URLとしてimg要素に設定します。
                    // これにより、選択した画像がブラウザ上でプレビュー表示されます。
                    document.querySelector('#img').innerHTML += '<img src="' + e.target.result + '">';
                });
                // ファイルをData URLとして読み込みます。
                fileReader.readAsDataURL(obj.files[i]);
            }
        }
    </script>
</body>
</html>
Webアプリケーション制作のための小ネタ集　目次に戻る

画像をプレビュー表示させたい　最後までお読みいただきありがとうございます。

研修のカリキュラムを見てみる