使用 URL.createObjectURL 的方法上傳圖片

JavaScript 靜態方法 URL.createObjectURL() 可以用來將 File 物件或是 Blob (Binary Large Object) 物件,轉換成帶有 URLDOMString 以「代表參數」中所傳入的物件,處理上傳圖片數據、可以用來顯示影片或圖片,不需要將 Blob 物件轉換成 Base64 編碼或其他格式,可以節省電腦或裝置上 Memory 記憶體和效能。

Blob (Binary Large Object)

Blob 物件為不可變物件。Blob (Binary Large Object) 中的資料並不一定是 JavaScript 原生的格式。使用 File 介面基於 Blob,繼承 blob 並擴充其功能以支援操作使用者系統上的檔案。

objectURL = URL.createObjectURL(blob);

JavaScript

$("input[type=file]").on("change", function () {
  function getObjectURL(file) {
    if (window.URL != undefined) {
      url = window.URL.createObjectURL(file);
      return url;
    }
  }
  var objURL = getObjectURL(this.files[0]);
  document.getElementById("image").src = objURL;
  document.getElementById("imgBlob").textContent = objURL;
});

Html

<p><input type="file" accept="image/*" /></p>
<p><b id="imgBlob">-</b></p>
<p><img id="image" src="images/Architecture-Build.png" alt="" /></p>

每次呼叫 createObjectURL() 都會產生一個新的 URL 不論是否曾經是同一物件產生過。當不再需要的時候將釋放它們。瀏覽器也會在 documentunload 時自動釋放它們,然而當有安全的時機考量時則採用手動的釋放。


JavaScript File 介面基於 Blob 繼承並且擴充其功能以支援瀏覽器端訪客上的使用檔案。可嘗試更改以下圖片、產生一個 blob 透過其連結再顯示出圖片。

URL


URL.revokeObjectURL

JavaScript 使用 URL.createObjectURL 的方法會在瀏覽器中產生新的 URL 物件會佔用些資源,如果不及時釋放,可能會造成記憶體洩漏或其他問題。因此於不希望瀏覽器保留對該檔案時不再需要使用這個 URL 物件的釋放電腦中的 RAM Memory 記憶體,應該使用 URL.revokeObjectURL 靜態方法來釋放、將 URL 物件從瀏覽器中移除,並釋放相關資源。