Javascript 如何预览多个输入

我想预览用户即将上传的图像。现在，我知道我的代码适用于一个输入和一个图像。一旦我添加了另一对输入和图像（与工作的图像相同），就没有图像可供预览

如何添加更多的输入，每个输入都有自己的图像以预览特定的输入

我的代码如下所示：

HTML:

我认为必须给函数一个Var，我想选择哪个输出，但我对Js完全陌生，所以也许你可以帮我

谢谢

编辑：

我不想在输入标记中有“multiple”属性。我创建了多个div，每个div都有一个不可见的输入标记和一个覆盖绝对位置的图像。因此，当用户单击div时，他可以选择一个图像，然后填充整个div

对于一个div来说一切都很好，但是我还需要11个div，每个div单独工作，这样用户就可以管理他要上传的图片的顺序

那么，我该怎么做才能让12个上传标签中的每一个单独使用自己的预览图像呢

window.URL=window.URL | | window.webkitURL；
var elBrowse=document.getElementById（“浏览”），
elPreview=document.getElementById（“预览”），
useBlob=false&&window.URL；//`true`使用Blob而不是数据URL
函数readImage（文件）{
var reader=new FileReader（）；
reader.addEventListener（“加载”，函数（）{
var image=新图像（）；
image.addEventListener（“加载”，函数（）{
var imageInfo=file.name+“”+
image.width+“×”+
image.height+“”+
file.type+“”+
Math.round（file.size/1024）+'KB'；
elPreview.appendChild（this）；
elPreview.insertAdjacentHTML（“beforeed”，imageInfo+”
）；
});
image.src=useBlob？window.URL.createObjectURL（文件）：reader.result；
if（useBlob）{
window.URL.revokeObjectURL（文件）；//释放内存
}
});
reader.readAsDataURL（文件）；
}
elBrowse.addEventListener（“更改”，函数（）{
var files=this.files；
var误差=”；
如果（！文件）{
错误+=“您的浏览器不支持文件上载。”；
}
如果（文件和文件[0]）{
对于（var i=0；i
编辑：

我不想在输入标记中有“multiple”属性。我创建了
多个div，每个div都有一个不可见的输入标记和一个
与绝对位置重叠。因此，当用户单击div时
可以选择一个图像，然后填充整个div

对于一个div来说一切都很好，但我还需要11个div，每个div都能正常工作
分开，这样用户就可以管理他所拍摄的照片的顺序
即将上载

那么，我该怎么做才能让12个上传标签中的每一个正常工作呢
单独使用自己的预览图像

元素.id
在
文档中应该是唯一的。您可以将单击的元素传递到
预览文件（）
调用，使用
.nextElementSibling
选择同级


您的代码没有任何错误…请尝试通过firefox 48进行测试。这篇文章将帮助您可能正在使用相同的ID？ID在网页中必须是唯一的。“只要我添加另一对输入和图像，与工作的输入和图像相同”
文档中的
元素.id
应该是唯一的。您可以使用设置了
多个属性的单个
元素，以允许用户在单个
更改
事件中上载多个文件。非常感谢！这几乎像我希望的那样工作！您有没有提示我如何选择在div内部？@JonasLey“你有什么建议可以帮我选择它是否在div内部的div内部吗？”你可以在每个
div
中设置一个
className
，其中包含
元素，然后使用
document.querySelectorAll（）
；
var divs=document.querySelectorAll（.divContainsPreview”）
，然后选择
div
特定索引，例如，在索引
0
，并使用
元素.querySelector（）
divs[0]。querySelector（“img”）
非常感谢！您有丰富的知识！
<input type="file" accept="image/*" onchange="previewFile()">
<img id="output1" height="100px">

function previewFile(){
        var preview = document.querySelector('img');
        var file    = document.querySelector('input[type=file]').files[0];
        var reader  = new FileReader();

        reader.onloadend = function () {
            preview.src = reader.result;
        }

        if (file) {
            reader.readAsDataURL(file);
        }
        else {
            preview.src = "";
        }
    }