使用URL.createObjectURL()與FileReader API實現文件（圖片）上傳立即回顯

來自mozilla的定義：

FileReader 對象允許Web應用程序異步讀取存儲在用戶計算機上的文件（或原始數據緩沖區）的內容，使用 File 或 Blob 對象指定要讀取的文件或數據。

其中File對象可以是來自用戶在一個<input>元素上選擇文件后返回的FileList對象,也可以來自拖放操作生成的 DataTransfer對象,還可以是來自在一個HTMLCanvasElement上執行mozGetAsFile()方法后返回結果。

重要提示： FileReader僅用於以安全的方式從用戶（遠程）系統讀取文件內容 它不能用於從文件系統中按路徑名簡單地讀取文件。 要在JavaScript中按路徑名讀取文件，應使用標准Ajax解決方案進行服務器端文件讀取，如果讀取跨域，則使用CORS權限。

Note: 此特性在  Web Worker 中可用。

https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

 

URL.createObjectURL() 靜態方法會創建一個 DOMString，其中包含一個表示參數中給出的對象的URL。這個 URL 的生命周期和創建它的窗口中的 document 綁定。這個新的URL 對象表示指定的 File 對象或 Blob 對象。

Note: 此特性在  Web Worker 中可用。

注意：此特性在 Service Worker 中不可用，因為它有可能導致內存泄漏。

https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL

對比

	createObjectURL	FileReader
兼容性	ie10	ie10
執行機制	同步執行	異步執行（宏任務 - 回調方式）
返回值	獲取當前文件的一個內存URL	獲取一段data:base64的字符串
內存使用	createObjectURL返回一段帶hash的url，並且一直存儲在內存中，直到document觸發了unload事件（例如：document close）或者執行revokeObjectURL來釋放。	FileReader.readAsDataURL返回文件的base64字符串，比blob url消耗更多內存，但是在不用的時候會自動從內存中清除（通過垃圾回收機制）
使用場景	使用createObjectURL可以節省性能並更快速，只不過需要在不使用的情況下手動釋放內存	如果不太在意設備性能問題，並想獲取圖片的base64，則推薦使用FileReader.readAsDataURL

用法：

<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
<a href="#" id="fileSelect">Select some files</a> 
<div id="fileList">
  <p>No files selected!</p>
</div>

1、使用URL對象來展示圖片

window.URL = window.URL || window.webkitURL;

const fileSelect = document.getElementById("fileSelect"),
      fileElem = document.getElementById("fileElem"),
      fileList = document.getElementById("fileList");

fileSelect.addEventListener("click", function (e) {
  if (fileElem) {
    fileElem.click();
  }
  e.preventDefault(); // prevent navigation to "#"
}, false);

function handleFiles(files) {
  if (!files.length) {
    fileList.innerHTML = "<p>No files selected!</p>";
  } else {
    fileList.innerHTML = "";
    const list = document.createElement("ul");
    fileList.appendChild(list);
    for (let i = 0; i < files.length; i++) {
      const li = document.createElement("li");
      list.appendChild(li);
      
      const img = document.createElement("img");
      img.src = window.URL.createObjectURL(files[i]); // 生成的地址可以看做是本地的一個靜態資源地址 blob:https://mdn.mozillademos.org/7de34695-285e-4d1a-aeaf-7fe363ff42e5
      img.height = 60;
      img.onload = function() {
        window.URL.revokeObjectURL(this.src); // 生成的圖片地址是一個object URL，即使之前創建了同一張圖片的object URL，此時也會重新創建，所以為了優化性能，圖片加載完成后，請手動釋放該對象
      }
      li.appendChild(img);
      const info = document.createElement("span");
      info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
      li.appendChild(info);
    }
  }
}

2、使用來FileReader 展示圖片

function handleFiles(files) {
  for (let i = 0; i < files.length; i++) {
    const file = files[i];
    
    if (!file.type.startsWith('image/')){ continue }
    
    const img = document.createElement("img");
    img.classList.add("obj");
    img.file = file;
    preview.appendChild(img); // Assuming that "preview" is the div output where the content will be displayed.
    
    const reader = new FileReader();
    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
    reader.readAsDataURL(file);
  }
}

 上述兩種方式都可以用來預覽圖片等其他本地資源，具體可自行嘗試。