Wie kann ich vor dem Hochladen eine clientseitige Vorschau eines Bildes anzeigen?

Vorschau eines Bildes auf der Clientseite

Um eine Vorschau eines Bildes vor dem Hochladen anzuzeigen, können Sie die Dateieingabe von HTML und die URL.createObjectURL nutzen ()-Methode. Hier ist eine detaillierte Lösung, die vollständig im Browser funktioniert:

Fügen Sie in Ihrem HTML-Formular ein Eingabefeld hinzu, das die Auswahl eines Bildes ermöglicht:

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

Als nächstes erstellen Sie ein Bildelement, um das anzuzeigen Vorschau:

<img>

Zuletzt fügen Sie JavaScript hinzu, das die im Eingabefeld ausgewählte Datei erfasst und aus deren Inhalt eine Objekt-URL erstellt, die dann dem Bild zugewiesen wird src-Attribut des Elements:

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

Wenn ein Benutzer ein Bild im Eingabefeld auswählt, aktualisiert dieser Code das Bildelement dynamisch und zeigt eine Vorschau des ausgewählten Bildes an, ohne es auf einen Server hochladen zu müssen. Dieser Ansatz ist praktisch und effizient, um auf der Clientseite eine sofortige Vorschau der Bilddateien anzuzeigen, bevor der Benutzer sie hochlädt.

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