Einführung

Als das Bild des Benutzers geändert wurde, war es schwierig zu sagen, ob die Datei angehoben, aber deutlich geändert wurde. Daher habe ich jQuery verwendet, um eine gute Vorschau anzuzeigen (ich bin nicht gut an der Rezeption ...).

ruby 2.6.3 rails 6.0.3 Uploader ActiveStorage jQuary

Überblick

Verhalten, das Sie tun möchten

Vor dem Hochladen der Datei: Vorschau der Anzeige von Bildern, die bereits mit dem Benutzer verknüpft sind Nach dem Hochladen der Datei: Blenden Sie die Anzeige des Bildes aus, das dem Benutzer bereits zugeordnet ist. Vorschau der neuen Bilddatei

Liste der Implementierungsdateien

users ①edit.html.slim ②_form.html.slim (Nur der Formteil wird ausgeschnitten und verwendet. Es gibt kein Problem, auch wenn Sie alles in Bearbeitung schreiben.) ③javascripts/app/users/edit.js

Implementierung

`edit.html.slim`


- content_for :title
  = I18n.t 'helpers.title.edit', model: t_model(:user), name: @user.name

== render 'form', model: @user

`_form.html.slim`


= render 'shared/validation_messages', model: model
= simple_form_for model, html: { class: 'form-horizontal js-editing' } do |f|

  .page-content.container.profile_edit
    .card
      .card-header
        h5.card-title
          |Grundinformation
      .card-body.p-3.ibox-content
        .no-padding.no-margins
          .circle-avatar
            img src="#" id="avatar_img_prev" class="d-none"
            - if model.image.attached?
              = image_tag(model.image, class: 'avatar_present_img')
            - else
              = image_tag("defaurt-user.png ", class: "avatar_present_img")
          |
          br
          = f.file_field :image, id: "post_img"

          = f.input :name, placeholder: 'Hanako Yamada'
　　　　　　/Folgendes wird weggelassen

`javascripts/app/users/edit.js`


/* global $ */

$(function() {
  function readURL(input) {
    if (input.files && input.files[0]) {
      var reader = new FileReader();

      reader.onload = function (e) {
        $('#avatar_img_prev').attr('src', e.target.result);
      };
      reader.readAsDataURL(input.files[0]);
    }
  }

  $("#post_img").change(function(){
    $('#avatar_img_prev').removeClass('d-none');
    $('.avatar_present_img').remove();
    readURL(this);
  });
}());

Ich bin darauf gestoßen

・ Die Art und Weise, img in schlanker Notation zu schreiben, ist nicht img src:" ~~ ", id:" ~~ ", sondernimg src = "~~" id = "~~"(selten) Ich habe es nicht verstanden, weil ich es nicht geschrieben habe ...).

・ Da die Klasse von "img src =" # "id =" avatar_img_prev "class =" hidden "" nicht gut wiedergegeben wurde, wurde sie in "class =" d-none "geändert. → Es hat funktioniert.