Javascript FileReader API多次使用同一ID标记调用图像？

我一直在想如何使用HTML5文件阅读器API 在重复id上多次显示同一图像

植入的一个例子如下：

通过单击创建一个div，在每个创建的div中都有一个显示图像的调用（id=“list”）。然后，当有人添加他们的图像时，每个新创建的div都包含这些图像

但问题是Filereader无法识别同一div id的多个实例。 它只在一个分区中显示图像，我希望每个分区都重复这些图像

希望有人能让我走上正确的道路。 谢谢

---

基本文件API：

if（window.File&&window.FileReader&&window.FileList&&window.Blob）{
//非常成功！支持所有文件API。
}否则{
警报（'抱歉，此浏览器不完全支持HTML5 FileReader API'）；
}
功能手柄文件选择（evt）{
var files=evt.target.files；//文件列表对象
//循环浏览文件列表并将图像文件渲染为缩略图。
for（var i=0，f；f=files[i]；i++）{
//仅处理图像文件。
如果（！f.type.match（'image.*'））{
继续；
}
var reader=new FileReader（）；
//闭包以捕获文件信息。
reader.onload=（函数（文件）{
返回函数（e）{
//渲染缩略图。
var span=document.createElement（'span'）；
setAttribute（'class'，'spin'）；
span.innerHTML=[''）.join（''）；
document.getElementById（'list'）.insertBefore（span，null）；
};
})（f） )；
//作为数据URL读入图像文件。
reader.readAsDataURL（f）；
}
}
document.getElementById（'files'）.addEventListener（'change'，handleFileSelect，false）；
//

最佳解决方案：

不要使用重复的

ID

s

根据HTML规范，ID在文档中是唯一的

您会注意到API指的是：

document.getElementById

——注意单数元素

您最好使用CSS类名并从中进行选择，或者使用

data-

属性并从中进行选择

如果您坚持使用重复的

ID

无论如何：

document.queryselectoral（“列表”）--这将处理多个ID的无效代码

根据评论更新

document.getElementsByClassName
和
document.querySelectorAll
都返回一个节点列表——一个必须循环的类似数组的结构

从您的使用情况来看，您似乎来自jQuery背景，它通过将所有内容转换为一个数组并将jQuery方法应用于该数组来隐藏所有这些内容。纯JavaScript不是这样工作的

当试图弄清楚为什么JavaScript中的东西不起作用时，最好看看它的值。这会告诉你很多

var nodeList = document.querySelectorAll("#list");
console.log(nodeList);
console.log(nodeList.toString());
for (var i = 0; i < nodeList.length; i++) {
  var node = listList[i];

   var span = document.createElement("span");
   span.appendChild(document.createTextNode("A span!");
   node.insertBefore(span, null)
}

var nodeList=document.queryselectoral（“列表”）；
console.log（节点列表）；
log（nodeList.toString（））；
对于（变量i=0；i
这就成功了。
谢谢



window.preview=函数（输入）{
if（input.files&&input.files[0]）{
$（input.files）。每个（函数（）{
var reader=new FileReader（）；
reader.readAsDataURL（this）；
reader.onload=函数（e）{
$（“.list”）。追加（“”）；
}
});
}

}


我发现window.URL.createObjectURL（）更快、更容易，因为我不需要FileReader那样愚蠢的onload回调。我不知道你在用这些编辑做什么，但请不要再这样做了。
var nodeList = document.querySelectorAll("#list");
console.log(nodeList);
console.log(nodeList.toString());
for (var i = 0; i < nodeList.length; i++) {
  var node = listList[i];

   var span = document.createElement("span");
   span.appendChild(document.createTextNode("A span!");
   node.insertBefore(span, null)
}

<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>



<script>
 window.preview = function (input) {
if (input.files && input.files[0]) {
    $(input.files).each(function () {
        var reader = new FileReader();
        reader.readAsDataURL(this);
        reader.onload = function (e) {
            $(".list").append("<img class='thumb' src='" + e.target.result + "'>");
        }
    });
}