목표

개발 환경

전제 조건

이루어지다

1. 뷰 편집

/ 追記
= f.file_field :profile_image, class: 'img_field', style: 'display:none;'
= attachment_image_tag @user, :profile_image, fallback: 'no-image.png', onClick: "$('.img_field').click()", class: 'center-block img-thumbnail img-responsive img_prev'
br

[해설]

① file_디스플레이:none에 필드를 숨기고 클래스를 부여합니다.

= f.file_field :profile_image, class: 'img_field', style: 'display:none;'

②①에서 부여한 클래스의 HTML(file field)을 클릭한 후 JavaScript 처리를 수행합니다.

onClick: "$('.img_field').click()"

2. appliacation.scss 편집

// 追記
.img_prev:hover {
  cursor: pointer; 
  opacity: 0.7;
  transform: scale(1.01, 1.01);
}

[해설]

① 마우스가 이미지에 있을 때 CSS를 반영합니다.

.img_prev:hover {}

② 마우스 커서를 포인터로 변경합니다.

cursor: pointer; 

③ 불투명도를 낮춰 이미지를 약간 하얗게 만든다.

opacity: 0.7;

④ 이미지를 약간 확대합니다.

transform: scale(1.01, 1.01);

3. JavaScript 파일 작성, 편집

$ touch app/assets/javascripts/image_preview.js

$(function () {
  function readURL(input) {
    if (input.files && input.files[0]) {
      var reader = new FileReader();
      reader.onload = function (e) {
        $('.img_prev').attr('src', e.target.result);
      }
      reader.readAsDataURL(input.files[0]);
    }
  }

  $('.img_field').change(function () {
    readURL(this);
  });
});

[해설]

① 1.② 편집에서 뷰 처리를 수행합니다.

$('.img_field').change(function () {
  readURL(this);
});