Wie kann ich Bilder vor dem Hochladen mit HTML5 in der Vorschau anzeigen?

Vorschau eines Bildes vor dem Hochladen

Bei der Webentwicklung kann es von Vorteil sein, Benutzern eine Vorschau eines Bildes bereitzustellen, bevor sie es einreichen . Dadurch können Benutzer sicherstellen, dass das Bild korrekt ist, bevor sie es hochladen, was möglicherweise die Anzahl von Fehlern und Nacharbeiten reduziert.

Die Lösung: HTML5-Dateischnittstelle

Glücklicherweise ist die HTML5 Die Dateischnittstelle bietet eine einfache Möglichkeit, Bilder im Browser in der Vorschau anzuzeigen, ohne eine Serveranfrage zu stellen oder Ajax zu verwenden. So funktioniert es:

1. Erstellen Sie ein Bildelement

Erstellen Sie ein HTML Element mit einer ID (z. B. blah), um die Bildvorschau anzuzeigen.

2. Holen Sie sich die Datei aus der Eingabe

Fügen Sie einen Onchange-Ereignishandler zum Dateieingabeelement hinzu. Wenn eine Datei ausgewählt wird, extrahiert der Ereignishandler die ausgewählte Datei aus dem Eingabeelement.

3. Verwenden Sie die Dateischnittstelle

Erstellen Sie mit der Methode URL.createObjectURL() eine Objekt-URL für die ausgewählte Datei. Dadurch wird eine temporäre URL erstellt, die es dem Browser ermöglicht, das Bild anzuzeigen.

4. Aktualisieren Sie die Bildquelle

Legen Sie das src-Attribut des fest. Element zur Objekt-URL hinzufügen. Dadurch wird die Vorschau des ausgewählten Bildes angezeigt.

Beispielcode

<input accept="image/*" type="file">

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

Das obige ist der detaillierte Inhalt vonWie kann ich Bilder vor dem Hochladen mit HTML5 in der Vorschau anzeigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!