[Rails] jQueryで画像プレビュー機能を実装する

RailsのポートフォリオにjQueryを使って画像プレビュー機能を実装した時のメモ。

完成イメージ

実装と解説

①HTMLにID付与

まずは画像プレビューを付けたい箇所にidを付与します。
idをつけることでjQueryを反映させる目印になります。

idをつけるのはイメージを反映する場所のimage_tagとfile_field
これから実装するjQueryのファイルを読み込むのも忘れずに！

app/views

.form.text-center
  = image_tag event.eyecatch_image, id: 'preview', class: 'preview-image'
.form.text-center.mt-5
  = f.file_field :eyecatch, id: 'input-file'

= javascript_pack_tag 'image-preview'

②jQueryで画像プレビュー

jQueryで画像プレビューできるようにしていきます。

app/javascript/packs/image-preview

import $ from 'jquery'

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

1行ずつ詳しく解説していきます。

input-fileというidに変化があれば実行される関数を定義。

$('#input-file').on('change', function (e){

}

FileReaderでファイルの読み込みができるように、それをreaderとして変数に格納。

var reader = new FileReader();

格納したreaderにonloadを使って、読み込みが可能になったら実行とする関数を定義。

reader.onload = function (e) {

}

読み込んだ画像ファイルの結果をpreviewというidを持つ部分に表示

$("#preview").attr('src', e.target.result);

最後にさっき読み込んだファイルをreadAsDataURLで実際に読み込むことで反映。

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

③スタイル調整

画像表示する部分のスタイルを設定して完成です。
これはお好みでどうぞ！

app/assets/stylesheets

.preview-image {
  width: 40%;
  height: auto;
}