Wie kann ich Bilder vor dem Hochladen in einem Browser in der Vorschau anzeigen, ohne Ajax zu verwenden?

Vorschau von Bildern vor dem Hochladen im Browser

In der Welt der Webentwicklung ist es oft wünschenswert, Benutzern eine Vorschau der Bilder zu bieten Bilder, die sie hochladen, bevor sie sich zum Hochladen verpflichten. Diese Funktionalität kann das Benutzererlebnis erheblich verbessern, indem sie visuelles Feedback liefert und es ihnen ermöglicht, fundierte Entscheidungen über die Bilder zu treffen, die sie teilen möchten.

Implementierung der Bildvorschau ohne Ajax

Um eine Bildvorschau ohne die Verwendung von Ajax zu erzielen, muss die Datei-API verwendet werden, die eine browserbasierte Schnittstelle für die Interaktion mit Dateien bereitstellt. Die folgenden Schritte beschreiben, wie Sie die Bildvorschaufunktionalität mit diesem Ansatz implementieren:

1. Ereignishandler für Dateieingabe:

   • Ereignis hinzufügen Listener für das Dateieingabeelement, das eine Funktion auslöst, wenn eine Datei vorhanden ist ausgewählt.

2. Objekt-URL erstellen:

   • Verwenden Sie im Ereignishandler die Methode URL.createObjectURL(), um Erstellen Sie eine URL, die das Ausgewählte darstellt Datei.

3. URL der Bildquelle zuweisen:

   • Rufen Sie die -Datei ab. Element, in dem die Vorschau angezeigt wird.
   • Setzen Sie das src-Attribut des Element zur in Schritt 2 erstellten URL hinzufügen.

Beispielcode:

Der folgende Code veranschaulicht die oben beschriebenen Schritte:

imgInp.onchange = evt => {
  const [file] = imgInp.files;
  if (file) {
    blah.src = URL.createObjectURL(file);
  }
};

<form runat="server">
  <input accept="image/*" type='file'>

Durch die Implementierung dieser Technik können Entwickler ihren Benutzern eine nahtlose und bequeme Bildvorschau bieten, ohne dass dies erforderlich ist serverseitige Interaktionen.

Das obige ist der detaillierte Inhalt vonWie kann ich Bilder vor dem Hochladen in einem Browser in der Vorschau anzeigen, ohne Ajax zu verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!