[JAVA] [JQuery] Affichage de l'aperçu de la sélection de formulaire à partir du fichier

introduction

Sélectionnez une image dans un fichier et permettez-lui d'afficher l'image sélectionnée avant de la soumettre.

L'image est la suivante.

Comme prémisse

-Il est possible de définir jQuery. -Utiliser Rails version 5.2 ・ Utilisez Haml

Définissons le fichier de vue

edit.html.haml

.editmain_right
  .editmain_right_form
    .editmain_right_form_sub
      %span.icon
      %span.icontext Télécharger une image de profil
    .editmain_right_form_main
      .editmain_right_form_main_ajax
      .editmain_right_form_main_file
        = f.file_field :image, class: "image_form"
       %span.texpic  
Téléchargement de photos

Définir jQuery

edit.js

$(document).on('turbolinks:load', function() {
$(function(){
  //Ajouter un événement pour l'affichage de l'aperçu du fichier image Enregistrer un événement qui se déclenche lorsque le fichier est sélectionné
  $('form').on('change', 'input[type="file"]', function(e) {
    var file = e.target.files[0],
        reader = new FileReader(),
        $subsubimageboxs = $(".editmain_right_form_sub");
        t = this;

    //Ne rien faire sauf pour les fichiers image
    if(file.type.indexOf("image") < 0){
      return false;
    }

    //Enregistrement d'événement lorsque la lecture du fichier est terminée
    reader.onload = (function(file) {
      return function(e) {
        //Supprimer l'aperçu existant
        $subsubimageboxs.empty();
        // .Ajout d'une balise d'image pour afficher l'image chargée dans la zone précédente
        $subsubimageboxs.append($('<img>').attr({
                  src: e.target.result,
                  width: "150px",
                  class: "editmain_right_form_sub",
                  title: file.name
              }));
      };
    })(file);

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