Javascript 为什么相同的JS代码不适用于第二个帖子/图片，但适用于第一个帖子/图片？

请检查一下

图像预览在第一篇文章中效果良好，但在其他文章中效果不佳

我应该在这里换什么

function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();

reader.onload = function(e) {
  $('#blah').attr('src', e.target.result);
}

reader.readAsDataURL(input.files[0]);

}
}



$("#imgInp").change(function() {
 readURL(this);
});

1.单击下拉菜单并选择查看

它将预览图像。现在，从您的计算机浏览任何图像，它将立即显示 它很好用。 但不适用于第二个帖子/图片。 我想你错过了其他模式下图像预览的id blah和输入文件的imgInp，所以下面我把它们放在blah2和imgInp2上，但另一个问题是，当你在第一个模式上上传第一个输入时，它也显示在第二个模式上。对不起，英语不好

函数readURLinput{ 如果输入.files&&input.files[0]{ var reader=新文件读取器； reader.onload=函数e{ $'blah'.attr'src'，e.target.result； $'blah2'.attr'src'，e.target.result； } reader.readAsDataURLinput.files[0]； } } $imgInp.changefunction{ 读懂这一点； }; $imgInp2.changefunction{ 读懂这一点； }; @导入url'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'; .2个职位{ 利润率最高：50； } 看法 看法 &时代； 编辑文章 关 拯救 &时代； 编辑文章 关 拯救

---

代码中有几个问题

1.在HTML中，有两个imgInp元素

id属性为HTML元素指定一个唯一的id值 在HTML文档中必须是唯一的。-

对两个文件输入使用两个不同的ID，如下所示

<input type="file" class="file" id="imgInp1"/>
<input type="file" class="file" id="imgInp2"/>

3.检查单击的输入并进行处理

reader.onload = function(e) {
    if($(input).attr('id')==='imgInp1') { // first input
        $('#blah1').attr('src', e.target.result);
    } else if ($(input).attr('id')==='imgInp2'){ // second input
        $('#blah2').attr('src', e.target.result);
    }
}

演示：

---

这是我的第一个答案。如果我做错了什么，请告诉我。谢谢：

imgblah仅处于第一个模式。此外，您不需要文件阅读器，请使用URL.createObjectURLfile。添加id=blah后仍不工作。此外，在我的项目中，所有id=blah但不工作…任何解决方案？？id在文档中必须是唯一的，请使用其他选择器。

reader.onload = function(e) {
    if($(input).attr('id')==='imgInp1') { // first input
        $('#blah1').attr('src', e.target.result);
    } else if ($(input).attr('id')==='imgInp2'){ // second input
        $('#blah2').attr('src', e.target.result);
    }
}