[JAVA] [JQuery] Vorschau der Formularauswahl aus der Datei

Einführung

Wählen Sie ein Bild aus einer Datei aus und lassen Sie es das ausgewählte Bild anzeigen, bevor Sie es senden.

Das Bild ist wie folgt.

Als Voraussetzung

-Es ist möglich, jQuery einzustellen. -Verwenden Sie Rails Version 5.2 ・ Verwenden Sie Haml

Lassen Sie uns die Ansichtsdatei einstellen

edit.html.haml

.editmain_right
  .editmain_right_form
    .editmain_right_form_sub
      %span.icon
      %span.icontext Profilbild hochladen
    .editmain_right_form_main
      .editmain_right_form_main_ajax
      .editmain_right_form_main_file
        = f.file_field :image, class: "image_form"
       %span.texpic  
Foto hochladen

Stellen Sie jQuery ein

edit.js

$(document).on('turbolinks:load', function() {
$(function(){
  //Ereignis für Vorschau der Bilddatei hinzufügen Registrieren Sie ein Ereignis, das bei Auswahl der Datei ausgelöst wird
  $('form').on('change', 'input[type="file"]', function(e) {
    var file = e.target.files[0],
        reader = new FileReader(),
        $subsubimageboxs = $(".editmain_right_form_sub");
        t = this;

    //Tun Sie nichts außer Bilddateien
    if(file.type.indexOf("image") < 0){
      return false;
    }

    //Ereignisregistrierung, wenn das Lesen der Datei abgeschlossen ist
    reader.onload = (function(file) {
      return function(e) {
        //Vorhandene Vorschau löschen
        $subsubimageboxs.empty();
        // .Bild-Tag hinzugefügt, um geladenes Bild im vorherigen Bereich anzuzeigen
        $subsubimageboxs.append($('<img>').attr({
                  src: e.target.result,
                  width: "150px",
                  class: "editmain_right_form_sub",
                  title: file.name
              }));
      };
    })(file);

    reader.readAsDataURL(file);
  });
});
});