ローカル画像のJavaScriptを削除する方法

Web サイトやアプリケーションでローカル画像を使用する場合、特定の画像を削除する必要がある場合があります。 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() を組み合わせて使用​​する

少し異なる方法を使用して、Web サイトから画像を完全に削除できます。以下のコード スニペットで詳しく説明します。

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;

Web サイトまたはアプリケーションから画像を完全に削除したい場合は、前のコード スニペットを使用して、現在の画像ソースの URL を blobUrl 変数に保存してください。画像を削除する必要がある場合は、URL.revokeObjectURL() メソッドを呼び出して、以前に保存した画像の URL を渡すだけです。

結論:

JavaScript でローカル画像を削除する方法はたくさんありますが、URL.createObjectURL() メソッドと URL.revokeObjectURL() メソッドを使用するのが、より一般的で最も効率的な方法の 1 つです。方法。このメソッドを使用して、ローカル イメージを追加または更新し、必要に応じてイメージを削除できます。

以上がローカル画像のJavaScriptを削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。