用createObjectURL实现本地图片预览URL 接口是一个包含若干静态方法的对象，用来创建（解析、编码等）URL

什么是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端

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)

浏览器会在文档退出的时候自动释放它们，但是为了获得最佳性能和内存使用状况，你应该在安全的时机主动释放掉它们。