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

矫情吗；* 2022-06-06 11:59 532阅读 0赞

本示例使用对象 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()`

这从获取 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.将新的列表项追加到列表中。