フォームで選択中の画像をプレビューできるようにする

フォームから選択した画像ファイルを即座にブラウザ上にプレビューする方法をメモします。
JavaScriptの記述は基本的にjQueryを使用していきます。

環境:
Mac OS 10.13.6、
ブラウザ : Google Chrome : 79.0.3945.88（Official Build） （64 ビット）、
jQuery : 3.3.1

（HTML）

<form action="（送信先）" enctype="multipart/form-data" method="post">
  <input type="file" name="upfile">
</form>
<img id="preview" width="200px">

inputタグ、type属性をfileとしてファイルを選択出来るようにし、
画像をプレビューする領域として空のimgタグを作成します。

（JS）

$(function(){
  $("[name='upfile']").on('change', function (e) {
    
    var reader = new FileReader();
    
    reader.onload = function (e) {
        $("#preview").attr('src', e.target.result);
    }

    reader.readAsDataURL(e.target.files[0]);   

  });
});

ファイルを選択したinputタグのchangeイベント内でHTML5 APIのFileReaderオブジェクトを使用します。

上記のように用意したimgタグのsrc属性に選択中のファイルのバイナリデータ（画像）を指定し、
readAsDataURLメソッドで読み込ませることでプレビューが可能となります。

※画像は元の大きさのまま表示されるので幅や領域等をスタイルで調整します。

Follow me!