使用 URL.createObjectURL 的方法上傳圖片
JavaScript 靜態方法 URL.createObjectURL() 可以用來將 File 物件或是 Blob (Binary Large Object) 物件,轉換成帶有 URL 的 DOMString 以「代表參數」中所傳入的物件,處理上傳圖片數據、可以用來顯示影片或圖片,不需要將 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 不論是否曾經是同一物件產生過。當不再需要的時候將釋放它們。瀏覽器也會在 document 被 unload 時自動釋放它們,然而當有安全的時機考量時則採用手動的釋放。
JavaScript File 介面基於 Blob 繼承並且擴充其功能以支援瀏覽器端訪客上的使用檔案。可嘗試更改以下圖片、產生一個 blob
透過其連結再顯示出圖片。
URL
URL.revokeObjectURL
JavaScript 使用 URL.createObjectURL 的方法會在瀏覽器中產生新的 URL 物件會佔用些資源,如果不及時釋放,可能會造成記憶體洩漏或其他問題。因此於不希望瀏覽器保留對該檔案時不再需要使用這個 URL 物件的釋放電腦中的 RAM Memory 記憶體,應該使用 URL.revokeObjectURL 靜態方法來釋放、將 URL 物件從瀏覽器中移除,並釋放相關資源。