使用 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 物件从浏览器中移除，并释放相关资源。