【jQuery】添付した画像をプレビュー表示する

はじめに

jqueryを使って、添付した画像をプレビューとして表示する方法について。

画像アップロード画面

画像アップロード画面のビューは下記の通りです。

  <%= form_with url: image_search_bugs_path, method: :post, local: true do |f| %>
    <div class="form-group mb-3">
      <p style="color: red;">※ファイル形式は`png`か`jpeg`でお願いします。</p>
      <%= f.file_field :image, class: 'form-control', id: 'input_image', accept: 'image/png, image/jpeg' %>
    </div>
    <div class="mb-3">
      <%= image_tag '', id: 'image_preview', style: 'display: none;' %>
    </div>
    <div class="actions mb-3">
      <%= f.submit '検索する', class: 'btn btn-primary' %>
    </div>
  <% end %>

画像ファイルをアップロードするタグに、input_imageというidを付与しています。

画像のプレビュー画面を表示するタグには、image_previewというidと、display: noneをつけてデフォルトでは見えない状態にしています。

jQueryを追加

続いて、jqueryの記述は下記のとおりです。

document.addEventListener("turbolinks:load", function() {
  $(function(){
    $("#input_image").change(function(){
      var file = $(this).prop('files')[0];
      var reader = new FileReader

      reader.onload = (function(){
        $("#image_preview").css("display", "");
        $("#image_preview").css({"width":"300px", "height":"300px"});
        $("#image_preview").attr("src", reader.result);
      });
      reader.readAsDataURL(file);
    })
  })
})

idのinput_imageが変わった時、つまり画像がアップロードされたときにイベントが発火します。

      var file = $(this).prop('files')[0];
      var reader = new FileReader

アップロードされた画像のデータを取得して、変数fileに代入します。

FileReaderのインスタンスを作成して、変数readerに代入します。

      reader.onload = (function(){
        .....
      });
      reader.readAsDataURL(file);

readAsDataURLを使って先程取得した画像のデータを変数readerに読み込ませます。

reader.onloadによって画像の読み込みが完了してから、内部の関数が実行されます。

      reader.onload = (function(){
        $("#image_preview").css("display", "");
        $("#image_preview").css({"width":"300px", "height":"300px"});
        $("#image_preview").attr("src", reader.result);
      });
      reader.readAsDataURL(file);