【JavaScript】input type=”file”で選んだ画像をプレビュー表示する方法

こんにちは。ゆうきです。

タイトルにもある通り、この記事ではHTMLのinput type=”file”で読みこんだ画像ファイルをプレビュー表示する方法を解説します。

余談ですが、本記事で解説したやり方でのプレビューをたった２行で実装できるJSモジュール「ImagePreviewer」を公開しました。
たった２行で画像プレビュー機能の実装ができるので、この記事を読んだ後に使ってもらえると嬉しいです！

参考

GitHub – yuki00yossi/ImgPreviewer

GitHub

さて、宣伝はこれくらいにして。。。早速本題に入っていきいましょう。

プレビュー表示処理の流れ
全体ソース
まとめ

プレビュー表示処理の流れ

まず最初に、どのような流れでプレビュー表示を行うのか、ということを解説していきます。

処理の流れは非常にシンプルで、下記３STEPで実行します。

inputタグで選択された画像を受け取る

まずはinputタグのonchangeイベントで、選択された画像を受け取ります。
受け取り方は以下の通りです。

const file = e.target.files[0];

eはイベントオブジェクトです。

受け取った画像を読み込む

次にFile APIを使用して、画像ファイルを読み込みます。
File APIとは、簡単にいうとローカル上のファイルをブラウザで操作するためのAPIです。
今回のようにブラウザ上で画像を表示したり、加工したりが出来ます。

File APIを使用しての画像読み込み方法は以下の通りです。

const fileReader = new FileReader();
// 画像を読み込む
fr.readAsDataURL(file);

読み込みが完了したら画像を表示する

最後にfileReaderのloadイベントを受け取って、その画像を表示します。
具体的なソースは以下の通り。

fileReader.addEventListener('load', (e) => {
// imgタグ生成
const imgElm = document.createElement('img');
imgElm.src = e.target.result; // e.target.resultに読み込んだ画像のURLが入っている
targetElm.appendChild(imgElm);
});

以上になります。

意外と簡単にできます。

全体ソース

ソースをまとめると、下記の通りです。

<!-- 画像を入れるためのdiv要素 -->
<div id="preview" style="width: 300px;"></div>
<input id="inputElm" type="file">
<script>
    const inputElm = document.getElementById('inputElm');
    inputElm.addEventListener('change', (e) => {
        const file = e.target.files[0];
        
        const fileReader = new FileReader();
        // 画像を読み込む
        fileReader.readAsDataURL(file);

        // 画像読み込み完了時の処理
        fileReader.addEventListener('load', (e) => {
            // imgタグ生成
            const imgElm = document.createElement('img');
            imgElm.src = e.target.result; // e.target.resultに読み込んだ画像のURLが入っている
            
            // imgタグを挿入
            const targetElm = document.getElementById('preview');
            targetElm.appendChild(imgElm);
        });
    });
</script>