[JAVA] [Rails] Implémentation de la fonction de prévisualisation d'image

Cible

Environnement de développement

・ Rubis: 2.5.7 Rails: 5.2.4 ・ Vagrant: 2.2.7 -VirtualBox: 6.1 ・ Système d'exploitation: macOS Catalina

supposition

Ce qui suit a été mis en œuvre.

・ Présentation mince ・ Introduction de Bootstrap 3 ・ Introduction de Font Awesome

• Implémentation de la fonction de connexion ・ Mise en œuvre de la fonction de publication

la mise en oeuvre

1. Modifier la vue

slim:users/edit.html.slim

/Postscript
= 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

[Explication]

(1) Cachez file_field de display: none et attribuez une classe.

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

(2) Lorsque le HTML (champ_fichier) de la classe assignée dans (1) est cliqué, le traitement JavaScript est exécuté.

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

2. Editez ʻapplication.scss`

appliacation.scss

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

[Explication]

① Reflétez le CSS lorsque la souris est sur l'image.

.img_prev:hover {}

② Changez le curseur de la souris en pointeur.

cursor: pointer; 

③ Réduisez l'opacité et rendez l'image un peu plus blanche.

opacity: 0.7;

④ Agrandissez un peu l'image.

transform: scale(1.01, 1.01);

3. Créer / modifier un fichier JavaScript

Terminal

$ touch app/assets/javascripts/image_preview.js

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

[Explication]

(1) 1. Le processus d'édition de la vue avec (2).

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