JavaScript读取和预览多个图像

我找到了在屏幕上读取多个图像的代码

代码如下：

HTML

---

我对它有一个问题，因为我不完全理解发生了什么以及为什么它没有预览/似乎它正在存储多个文件。

您的最后一行代码：

if (files) {
   [].forEach.call(files, readAndPreview);
}

我们什么也不做。它在一个空数组上对每个数组执行。 我想你想做的是：

files.forEach(readAndPreview)

---

这实际上会检查文件数组中的所有文件，并为它们调用

readAndPreview

。

包含的代码中的主要问题是没有id为

preview

的元素（参考：

var preview=document.querySelector（'#preview'）；

）

加上这个，它就会起作用。但是，您可以跳过

FileReader

，因为它不是必需的。相反，将文件视为一个Blob（它们基本相同），并使用

createObjectURL（）

——如果您想显示大量图像，性能和内存占用会显著提高

document.querySelector（'#browse'）.onchange=function（）{
var preview=document.querySelector（“#preview”）；
[].forEach.call（this.files，函数（file）{
如果（/image\/.*.test（file.type））{//使用浏览器可以读取的任何图像格式
var img=新图像；
img.onload=remURL；//使用后删除对象URL
img.style.height=“100px”；//使用样式，“宽度”默认为“自动”
img.src=（URL | | webkitURL）.createObjectURL（文件）；
preview.appendChild（img）；//将图像添加到预览容器
}
});
函数remURL（）{（URL | | webkitURL）.revokeObjectURL（this.src）}
};
这不起作用，因为文件包含一个FileList对象，而不是数组，并且没有forEach（）方法。使用指定的
this
参数调用函数。在本例中，
Array.prototype.forEach
在
文件上运行
if (files) {
   [].forEach.call(files, readAndPreview);
}

files.forEach(readAndPreview)