使用对象 url 显示图像（window.URL.createObjectURL的使用）

本示例使用对象 url 显示图像缩略图。此外, 它还显示其他文件信息, 包括它们的名称和大小。

呈现界面的 HTML 如下所显示:

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

这将建立我们的文件 <input>元素, 以及一个调用文件选取器的链接 (因为我们将文件输入隐藏起来, 以防止显示不太吸引人的用户界面)。这在使用click()方法的隐藏文件输入元素在字节中进行了解释, 这是调用文件选取器的方法。

方法如下:handleFiles()

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);
    }
  }
}




这从获取 ID 的 < div > 的 URL 开始。这是我们将插入我们的文件列表的块, 包括缩略图。fileList

如果传递给的列表对象是, 我们只需将该块的内部 HTML 设置为显示 "未选择任何文件!否则, 我们开始构建我们的文件列表, 如下所示:handleFiles()null
1.创建了一个新的无序列表 (< ul >) 元素。

2.新的列表元素通过调用其节点. 作用 () 方法插入到 < div > 块中。

3对于列表中的每个文件 , 表示为:files
       1. 创建新的列表项 (< li >) 元素并将其插入到列表中。

       2.创建新图像 (< img >) 元素。
       3.使用窗口将图像的源设置为表示该文件的新对象 URL 。url. createObjectURL () 创建 blob url。
       4.将图像的高度设置为60像素。
       5.设置映像的 load 事件处理程序以释放对象 URL, 因为一旦加载了映像, 它就不再需要。这是通过调用窗口

            完成的。url. revokeObjectURL () 方法, 并按照指定的方式传入对象 url 字符串。img.src
       6.将新的列表项追加到列表中。