[JAVA] Implementierung der Bildvorschau-Funktion

Einführung

Ich mache eine originelle App mit Rails. Wir haben eine Bildposting-Funktion in dieser App implementiert. Da die Vorschau nach dem Hochladen des Bildes (vor dem Speichern in der Datenbank) angezeigt wurde, notieren Sie es.

• Da die Erklärung in jeden Code eingefügt wird, wird der fertige Code am Ende veröffentlicht.

Inhaltsverzeichnis

1. Vorbereitung
2. Implementierung der Vorschaufunktion

1. Vorbereitung

Da JavaScript verwendet wird, bereiten Sie eine js-Datei vor. Definiert, dass beim Laden der Seite gearbeitet wird.

app/javascript/packs/preview.js

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

Die von getElementById erhaltene Bildliste ist der ID-Name des div-Tags in HTML. Zeigen Sie eine Vorschau für dieses div-Tag an. Daher werde ich es zu HTML hinzufügen (diesmal habe ich es unter der Schaltfläche "Senden" platziert).

Ruby:○○.html.erb

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

Bearbeiten Sie außerdem application.js so, dass die erstellte js-Datei geladen wird. Die auskommentierten Turbolinks sind Juwelen, die Bildschirmübergänge beschleunigen. Es scheint, dass nicht alle Informationen auf der Seite gelesen werden, sondern nur der HTML-Code. Daher wird das in JavaScript festgelegte Ereignis möglicherweise nicht ausgelöst.

app/javascript/packs/application.js

// require("turbolinks").start()  //Auskommentieren
require("@rails/activestorage").start()
require("channels")
require('./preview')  //Anhängen

2. Implementierung der Vorschaufunktion

Insgesamt 3 Schritte. ** 2-1. Erfassung von Bildinformationen Holen Sie sich zuerst die Bildinformationen und generieren Sie die URL. Bildinformationen werden erfasst, wenn sich der Wert des Eingabeelements ändert.

app/javascript/packs/preview.js

document.addEventListener('DOMContentLoaded', function(){
  const ImageList = document.getElementById('image-list');
 
  document.getElementById('desk_image').addEventListener('change', function(e){
  //↑desk_Bild ist die ID der Bildauswahlschaltfläche//
    const file = e.target.files[0];
    const blob = window.URL.createObjectURL(file);
  });
});

Das ausgewählte Bild wird in einem Array namens Dateien im ausgelösten Ereignis e, target gespeichert. Definieren Sie es in der Dateivariablen und generieren Sie die URL mit window.URL.createObjectURL.

** 2-2. Anzeige des aufgenommenen Bildes ** Erstellen Sie ein div-Element und ein img-Element, um das erfasste Bild mit createElement einzufügen. Zeigen Sie dann das generierte Element im Browser an.

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

  //Generieren Sie ein div-Element, um ein Bild anzuzeigen
    const imageElement = document.createElement('div');

  //Generieren Sie Bildelemente, um Bilder anzuzeigen und einzufügen
    const blobImage = document.createElement('img');
    blobImage.setAttribute('src', blob);

  //Zeigen Sie das generierte HTML-Element im Browser an
    imageElement.appendChild(blobImage);
    ImageList.appendChild(imageElement);
  });
});

Fügt ein Element innerhalb des durch appendChild angegebenen übergeordneten Elements hinzu (Verwendung: parent element.appendChild (untergeordnetes Element)).

** 2-3. Fehlervermeidung und Bearbeitbarkeit ** Das Bild wird mit 2-2 angezeigt. Auf der Konsole außer der Bildposting-Seite wird jedoch ein Fehler angezeigt. Um dies zu vermeiden, fügen Sie eine Bedingung hinzu. Beschreiben Sie die Anwendung, wenn die URL neu ist und bearbeitet wird (wenn Sie ein neues Bild veröffentlichen oder bearbeiten).

app/javascript/packs/preview.js

if (document.URL.match( /new/ ) || document.URL.match( /edit/ )) {
  document.addEventListener('DOMContentLoaded', function(){
    const ImageList = document.getElementById('image-list');
 
――――――――――――――――― weggelassen ―――――――――――――――――――――――
    //Zeigen Sie das generierte HTML-Element im Browser an
      imageElement.appendChild(blobImage);
      ImageList.appendChild(imageElement);
    });
  });
}

Löschen Sie beim Bearbeiten eines Bildes die vorhandene Vorschau und zeigen Sie dann die neue Bildvorschau an.

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){
      //Löschen Sie ein vorhandenes Bild nur, wenn das Bild angezeigt wird
      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);
    });
  });
}

das ist alles