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