如何刪除本機圖片javascript

當在網站或應用程式中使用本機圖片時，我們有時需要刪除某些圖片。在JavaScript中，有幾種方法可以實現刪除本機圖片。本文將詳細介紹如何使用JavaScript刪除本機圖片。

方法1：使用URL.revokeObjectURL()

在JavaScript中，使用URL.createObjectURL()建立URL物件來載入本機圖片。由於建立URL物件實質上是為了在頁面中顯示圖像，因此當不再需要顯示圖像時，可以使用URL.revokeObjectURL()方法來刪除該圖像。

下面是使用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;
  }
});

在上述程式碼中，當使用者選擇檔案並上傳時，我們將檔案的URL儲存在blobUrl變量中。然後，我們將blobUrl作為圖像來源設定到imgPreview元素。

如果您想要刪除已載入的映像，只需簡單地呼叫URL.revokeObjectURL()方法：

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

在上述程式碼片段中，我們先呼叫URL.revokeObjectURL()方法，將其與先前儲存的blobUrl變數一起傳遞。這會立即刪除已建立的URL物件。然後，我們將imgPreview元素的src屬性設為空字串，以清除映像。

方法2：使用URL.createObjectURL()與URL.revokeObjectURL()的組合方法

可以使用一種稍微不同的方法將圖片從網站中完全刪除。我們將在下面的程式碼片段中詳細描述：

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

在上述程式碼中，我們使用與前面相同的方法將檔案的URL儲存在blobUrl變數中，並將其作為圖像來源設定到imgPreview元素中。但是，我們又增加了另一個額外的步驟。

在我們將新圖像來源新增至imgPreview元素之前，我們檢查imgPreview元素是否已存在圖像來源。如果imgPreview元素中已經有映像來源，則需要先呼叫URL.revokeObjectURL()方法將其刪除，因為在重新定義src屬性之前，瀏覽器不會自動清除前一個URL。

在此組合方法中，我們可以透過簡單修改變數blobUrl的值來更新圖像，如下所示：

blobUrl = URL.createObjectURL(file);
if (imgPreview.src) {
  URL.revokeObjectURL(imgPreview.src);
}
imgPreview.src = blobUrl;

如果想要從網站或應用程式中完全刪除圖像，請使用前面的程式碼片段，並在blobUrl變數中儲存目前影像來源的URL。在需要刪除圖片時，我們只需簡單地呼叫URL.revokeObjectURL()方法並傳遞先前儲存的圖像URL即可。

結論：

在JavaScript中刪除本機圖片可能有很多方法，但是使用URL.createObjectURL()和URL.revokeObjectURL()方法是比較常用和最高效的方法之一。我們可以使用這個方法來新增或更新本機圖片，並在需要時刪除圖片。

以上是如何刪除本機圖片javascript的詳細內容。更多資訊請關注PHP中文網其他相關文章！