アップロードした画像の即時プレビュー法

画像を選択し、画像をDBに登録する前にプレビュー表示する方法をまとめたいと思います。

[環境]
Rails 5.2.4.3
ruby 2.5.7
すぐにプレビューできるようにjQueryを追加
画像投稿用gemはRefile

new.html.erb

<%= form_for 使用しているモデル, url: パス名_path do |f| %>

    <%= attachment_image_tag 使用しているモデル, :image, :fill, 300, 300, fallback: "no-image.jpg", size: "300x300" %>

    <%= f.attachment_field :image, class: 'image-prev' %>

次にapp/assets/javascripts/application.jsに記述していきます。

application.js

$(function(){
    $(document).on('change', '.image-prev', function (e) {
    var reader = new FileReader();
    reader.onload = function (e) {
        $(".image").attr('src', e.target.result);
    }
    reader.readAsDataURL(e.target.files[0]); 
});
});

クラス指定の場所に注意してください！！
私はこれで何時間もうまくいきませんでした！笑

メモ代わりに初投稿してみました。間違っているところやアドバイスなどあれば教えていただけると光栄です。お手柔らかに.....