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

画像をアップロードする前にブラウザ上でプレビューを表示できれば、ユーザーは選択したファイルが正しいものかどうかをその場で確認できます。これを実現するには、HTMLの <input type="file"> と、JavaScriptの FileReader API を組み合わせます。以下に具体的な実装方法を紹介します。

HTML側の実装

まず、ファイル選択用のinput要素と、プレビューを表示するためのimg要素を用意します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<form id="form1" runat="server">
  <input type='file' id="demo" />
  <img id="myid" src="#" alt="新しい画像" />
</form>

jQueryによるプレビュー処理

次に、ファイルが選択されたタイミングで FileReader を使って画像データを読み込み、img要素のsrc属性に設定します。

function display(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function(event) {
      $('#myid').attr('src', event.target.result);
    }
    reader.readAsDataURL(input.files[0]);
  }
}

$("#demo").change(function() {
  display(this);
});

コードの仕組み

• ユーザーがファイルを選択すると change イベントが発生し、display() 関数が呼び出されます。
• readAsDataURL() メソッドにより、選択された画像ファイルがBase64形式のデータURLとして読み込まれます。
• 読み込みが完了すると onload イベントが発火し、event.target.result に格納されたデータURLをimg要素の src 属性に設定することで、画像が画面に表示されます。

補足：URL.createObjectURL()を使う方法

FileReaderの代わりに、よりシンプルな URL.createObjectURL() を使うこともできます。

document.getElementById("demo").addEventListener("change", function(e) {
  const file = e.target.files[0];
  if (file) {
    document.getElementById("myid").src = URL.createObjectURL(file);
  }
});

この方法はBase64への変換を行わないため、サイズの大きい画像でも高速に動作するのが特徴です。用途やパフォーマンス要件に応じて、両者を使い分けるとよいでしょう。