So löschen Sie lokales Bild-Javascript

Wenn wir lokale Bilder in einer Website oder Anwendung verwenden, müssen wir manchmal bestimmte Bilder entfernen. In JavaScript gibt es mehrere Möglichkeiten, lokale Bilder zu löschen. In diesem Artikel wird detailliert beschrieben, wie Sie lokale Bilder mithilfe von JavaScript löschen.

Methode 1: Verwenden Sie URL.revokeObjectURL()

Verwenden Sie in JavaScript URL.createObjectURL(), um ein URL-Objekt zum Laden lokaler Bilder zu erstellen. Da ein URL-Objekt im Wesentlichen erstellt wird, um ein Bild auf einer Seite anzuzeigen, können Sie die Methode URL.revokeObjectURL() verwenden, um das Bild zu löschen, wenn es für die Anzeige nicht mehr benötigt wird.

Das Folgende ist ein Beispielcode zum Laden eines lokalen Bildes mit URL.createObjectURL():

const fileInput = document.getElementById("file-input");
const imgPreview = document.getElementById("img-preview");

fileInput.addEventListener("change", function () {
  const file = fileInput.files[0];
  if (file) {
    const blobUrl = URL.createObjectURL(file);
    imgPreview.src = blobUrl;
  }
});

Wenn der Benutzer im obigen Code eine Datei auswählt und hochlädt, Wir fügen die URL der Datei hinzu, die in der Variablen blobUrl gespeichert ist. Anschließend legen wir die blobUrl als Bildquelle im imgPreview-Element fest.

Wenn Sie ein geladenes Bild löschen möchten, rufen Sie einfach die Methode URL.revokeObjectURL() auf:

URL.revokeObjectURL(blobUrl);
imgPreview.src = '';

Im obigen Code-Snippet rufen wir zuerst die URL revokeObjectURL( auf. )-Methode und übergibt sie zusammen mit der zuvor gespeicherten blobUrl-Variablen. Dadurch wird das erstellte URL-Objekt sofort gelöscht. Anschließend setzen wir das src-Attribut des imgPreview-Elements auf eine leere Zeichenfolge, um das Bild zu löschen.

Methode 2: Verwenden Sie eine Kombination aus URL.createObjectURL() und URL.revokeObjectURL()

Eine etwas andere Methode kann verwendet werden, um das Bild vollständig von der Website zu entfernen. Wir beschreiben es ausführlich im folgenden Codeausschnitt:

const fileInput = document.getElementById("file-input");
const imgPreview = document.getElementById("img-preview");
let blobUrl;

fileInput.addEventListener("change", function () {
  const file = fileInput.files[0];
  if (file) {
    blobUrl = URL.createObjectURL(file);
    if (imgPreview.src) {
      URL.revokeObjectURL(imgPreview.src);
    }
    imgPreview.src = blobUrl;
  }
});

Im obigen Code verwenden wir dieselbe Methode wie zuvor, um die URL der Datei in der Variablen blobUrl zu speichern und sie als Bildquelle festzulegen to im imgPreview-Element. Wir haben jedoch einen weiteren zusätzlichen Schritt hinzugefügt.

Bevor wir eine neue Bildquelle zum imgPreview-Element hinzufügen, prüfen wir, ob die Bildquelle bereits im imgPreview-Element vorhanden ist. Wenn im imgPreview-Element bereits eine Bildquelle vorhanden ist, müssen Sie zuerst die Methode URL.revokeObjectURL() aufrufen, um sie zu entfernen, da der Browser die vorherige URL nicht automatisch löscht, bevor er das src-Attribut neu definiert.

Bei dieser kombinierten Methode können wir das Bild aktualisieren, indem wir einfach den Wert der Variablen blobUrl wie unten gezeigt ändern: Um ein Bild zu löschen, verwenden Sie den vorherigen Codeausschnitt und speichern Sie die URL der aktuellen Bildquelle in der blobUrl-Variablen. Wenn wir ein Bild löschen müssen, rufen wir einfach die Methode URL.revokeObjectURL() auf und übergeben die zuvor gespeicherte Bild-URL.

Fazit:

Es gibt möglicherweise viele Möglichkeiten, lokale Bilder in JavaScript zu löschen, aber die Verwendung der Methoden URL.createObjectURL() und URL.revokeObjectURL() ist häufiger und am weitesten verbreitet effizient. Eine der Methoden. Mit dieser Methode können wir lokale Bilder hinzufügen oder aktualisieren und bei Bedarf Bilder löschen.

Das obige ist der detaillierte Inhalt vonSo löschen Sie lokales Bild-Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!