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

introduction

Je crée une application originale avec Rails. Nous avons implémenté une fonction de publication d'images dans cette application. Puisque l'aperçu était affiché après le téléchargement de l'image (avant de l'enregistrer dans la base de données), notez-le.

• Puisque l'explication est insérée dans chaque code, le code complété est affiché à la fin.

table des matières

1. Préparation
2. Mise en œuvre de la fonction de prévisualisation

1. Préparation

Puisque JavaScript est utilisé, préparez un fichier js. Définit pour fonctionner lorsque la page se charge.

app/javascript/packs/preview.js

document.addEventListener('DOMContentLoaded', function(){
  const ImageList = document.getElementById('image-list');
});

La liste d'images obtenue par getElementById est le nom d'id de la balise div sur html. Afficher un aperçu de cette balise div. Par conséquent, je vais l'ajouter au html (cette fois, je l'ai placé sous le bouton d'envoi).

Ruby:○○.html.erb

<%= f.file_field :image %>
<%= f.submit 'Envoyer' %>
<div id="image-list"></div>

Modifiez également application.js afin que le fichier js créé soit chargé. Les turbolinks commentés sont des joyaux qui accélèrent les transitions d'écran. Il semble qu'il ne lit pas toutes les informations de la page, mais uniquement le HTML. Par conséquent, l'événement défini dans JavaScript peut ne pas se déclencher.

app/javascript/packs/application.js

// require("turbolinks").start()  //Commenter
require("@rails/activestorage").start()
require("channels")
require('./preview')  //Ajouter

2. Mise en œuvre de la fonction de prévisualisation

3 étapes au total. ** 2-1. Acquisition d'informations sur l'image Tout d'abord, obtenez les informations sur l'image et générez l'URL. Les informations d'image sont acquises lorsque la valeur de l'élément d'entrée change.

app/javascript/packs/preview.js

document.addEventListener('DOMContentLoaded', function(){
  const ImageList = document.getElementById('image-list');
 
  document.getElementById('desk_image').addEventListener('change', function(e){
  //↑desk_image est l'identifiant du bouton de sélection d'image//
    const file = e.target.files[0];
    const blob = window.URL.createObjectURL(file);
  });
});

L'image sélectionnée est stockée dans un tableau appelé fichiers dans l'événement déclenché e, cible. Définissez-le dans la variable de fichier et générez l'URL avec window.URL.createObjectURL.

** 2-2. Affichage de l'image acquise ** Créez un élément div et un élément img pour insérer l'image acquise avec createElement. Affichez ensuite l'élément généré dans le navigateur.

app/javascript/packs/preview.js

document.addEventListener('DOMContentLoaded', function(){
  const ImageList = document.getElementById('image-list');
 
  document.getElementById('desk_image').addEventListener('change', function(e){
    const file = e.target.files[0];
    const blob = window.URL.createObjectURL(file);

  //Générer un élément div pour afficher une image
    const imageElement = document.createElement('div');

  //Générer des éléments d'image pour afficher et insérer des images
    const blobImage = document.createElement('img');
    blobImage.setAttribute('src', blob);

  //Afficher l'élément HTML généré sur le navigateur
    imageElement.appendChild(blobImage);
    ImageList.appendChild(imageElement);
  });
});

Ajoute un élément à l'intérieur de l'élément parent spécifié par appendChild (Utilisation: élément parent.appendChild (élément enfant)).

** 2-3. Prévention des erreurs et possibilité de modification ** L'image sera affichée par 2-2. Cependant, une erreur s'affiche sur la console autre que la page de publication d'image. Pour éviter cela, ajoutez une condition. Décrivez pour postuler lorsqu'il y en a de nouveaux et éditez dans l'URL (lors de la publication d'une nouvelle image ou de l'édition)

app/javascript/packs/preview.js

if (document.URL.match( /new/ ) || document.URL.match( /edit/ )) {
  document.addEventListener('DOMContentLoaded', function(){
    const ImageList = document.getElementById('image-list');
 
---------------- Omis ----------------------
    //Afficher l'élément HTML généré sur le navigateur
      imageElement.appendChild(blobImage);
      ImageList.appendChild(imageElement);
    });
  });
}

Lors de la modification d'une image, supprimez l'aperçu existant, puis affichez le nouvel aperçu de l'image.

app/javascript/packs/preview.js

if (document.URL.match( /new/ ) || document.URL.match( /edit/ )) {
  document.addEventListener('DOMContentLoaded', function(){
    const ImageList = document.getElementById('image-list');

    document.getElementById('message_image').addEventListener('change', function(e){
      //Supprimer une image existante uniquement si l'image est affichée
      const imageContent = document.querySelector('img');
      if (imageContent){
        imageContent.remove();
      }
      const file = e.target.files[0];
      const blob = window.URL.createObjectURL(file);
      const imageElement = document.createElement('div');
      const blobImage = document.createElement('img');
      blobImage.setAttribute('src', blob);
      imageElement.appendChild(blobImage);
      ImageList.appendChild(imageElement);
    });
  });
}

c'est tout