用createObjectURL實現本地圖片預覽

南風一濺發表於2018-12-10
Object地圖

什麼是createObjectURL？

URL 介面是一個包含若干靜態方法的物件，用來建立（解析、編碼等）URLs.我們常用的href、hash、search就來自於URL物件。 createObjectURL就是URL的一個靜態方法。使用如下：

objectURL = URL.createObjectURL(blob);

// 用下面的程式碼實現字首相容

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

返回一個字串，包含一個唯一的blob連結，行如：

"blob:http://localhost:xxxx/299ef3f9-6649-4e6a-8971-698c6ed4237a"

通過這個字串（url）, 可以獲取到所指定檔案的完整內容，可以作為image連結或者檔案下載的連結

相容性

PC端

PC端

Mobile端

Mobile端

範例程式碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <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>

  <script>
    window.URL = window.URL || window.webkitURL;

    var 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 = "";
        var list = document.createElement("ul");
        fileList.appendChild(list);
        for (var i = 0; i < files.length; i++) {
          var li = document.createElement("li");
          list.appendChild(li);
          
          var img = document.createElement("img");
          img.src = window.URL.createObjectURL(files[i]);
          img.height = 60;
          img.onload = function() {
            window.URL.revokeObjectURL(this.src);
          }
          li.appendChild(img);
          var info = document.createElement("span");
          info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
          li.appendChild(info);
        }
      }
    }
  </script>
</body>
</html>
複製程式碼

附註

當不在使用URL物件時，可以呼叫revokeObjectURL手動釋放掉

URL.revokeObjectURL(objectURL)

瀏覽器會在文件退出的時候自動釋放它們，但是為了獲得最佳效能和記憶體使用狀況，你應該在安全的時機主動釋放掉它們。

相關文章