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]);
}); 

한 줄씩 자세히 설명합니다.
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;
}