[JAVA] [Rails] Implementierung der Bildvorschau

Ziel

Entwicklungsumgebung

・ Ruby: 2.5.7 Schienen: 5.2.4 ・ Vagrant: 2.2.7 -VirtualBox: 6.1 ・ Betriebssystem: macOS Catalina

Annahme

Folgendes wurde implementiert.

・ Schlanke Einführung ・ Einführung von Bootstrap 3 ・ Einführung von Font Awesome

• Implementierung der Anmeldefunktion ・ Implementierung der Posting-Funktion

Implementierung

1. Ansicht bearbeiten

slim:users/edit.html.slim

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

[Erläuterung]

(1) Verstecke file_field vor display: none und weise eine Klasse zu.

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

(2) Wenn auf HTML (Dateifeld) der in (1) zugewiesenen Klasse geklickt wird, wird die JavaScript-Verarbeitung ausgeführt.

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

2. Bearbeiten Sie application.scss

appliacation.scss

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

[Erläuterung]

① Reflektieren Sie CSS, wenn sich die Maus auf dem Bild befindet.

.img_prev:hover {}

② Ändern Sie den Mauszeiger in einen Zeiger.

cursor: pointer; 

③ Verringern Sie die Deckkraft und machen Sie das Bild etwas weißer.

opacity: 0.7;

④ Vergrößern Sie das Bild ein wenig.

transform: scale(1.01, 1.01);

3. Erstellen / bearbeiten Sie eine JavaScript-Datei

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

[Erläuterung]

(1) "1. Der Vorgang des Bearbeitens der Ansicht mit (2)".

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