JavaScriptでアップロード前に画像をプレビュー表示する2つの方法

セキュリティ上の理由により、ブラウザはinput要素で選択された画像ファイルのパスへの直接アクセスを許可していません。つまり、ブラウザ上で動作するJavaScriptはファイルシステムにアクセスできない仕組みになっています。

そのため、ユーザーが選択した画像ファイルをサーバーやその他の場所へ送信する前にプレビュー表示したい場合は、少し工夫が必要です。本記事では、JavaScriptでアップロード前に画像をプレビューする2つの実装方法を、サンプルコード付きでわかりやすく解説します。

方法1：URLクラスのcreateObjectURL()を使う

URLクラスが提供するcreateObjectURL()関数を使用すると、inputで選択されたファイルからオブジェクトURLを生成できます。このURLをimgタグのsrc属性に設定すれば、画像を手軽にプレビュー表示できます。

なお、createObjectURL()で生成したオブジェクトURLはメモリ上に保持され続けるため、画像の読み込みが完了したタイミングでrevokeObjectURL()を呼び出して解放するのがベストプラクティスです。

コード例

<img id="preview"/>
<input type="file" accept="image/*" onchange="previewImage(event)">
<script>
    const previewImage = e => {
        const preview = document.getElementById('preview');
        preview.src = URL.createObjectURL(e.target.files[0]);
        preview.onload = () => URL.revokeObjectURL(preview.src);
    };
</script>

方法2：FileReaderクラスを使う

もうひとつの方法は、FileReaderクラスを利用するアプローチです。inputで受け取ったファイルを読み込み、画像をbase64形式で表現したデータURL文字列を生成します。この文字列も同様に、imgタグのsrc属性に指定することで画像を表示できます。

コード例

<img id="preview"/>
<input type="file" accept="image/*" onchange="previewImage(event)">
<script>
    const previewImage = e => {
        const reader = new FileReader();
        reader.readAsDataURL(e.target.files[0]);
        reader.onload = () => {
            const preview = document.getElementById('preview');
            preview.src = reader.result;
        };
    };
</script>

実行結果

どちらの方法でも、ファイル選択後に以下のように画像がプレビュー表示されます。

まとめ：どちらの方法を選ぶべきか

両者にはそれぞれ特徴があります。

URL.createObjectURL() は処理が軽量で高速なのが魅力です。大きな画像ファイルでもメモリ効率よく扱え、プレビュー用途には最適です。
FileReader + base64 は、データURLとして画像データを文字列化できるため、プレビューだけでなくlocalStorageへの保存やサーバーへの送信など、データ自体を扱いたい場面で活躍します。ただし、ファイルサイズが大きいほど文字列が肥大化し、処理負荷やメモリ消費が増える点には注意が必要です。

単純にプレビュー表示だけが目的であれば方法1、画像データを文字列として保持・送信したい場合は方法2というように、用途に応じて使い分けることをおすすめします。