Javascript 如何为4个不同的表单字段单独上传

我这里有一张上传表格：

上载正在为第一个字段工作。但用户需要上传4张单独的图片

   <h1> Field One </h1>
    <form id="form1" runat="server">
        <input type='file' id="imgInp" />
        <br>
        <img id="form-pic-1" src="http://i.imgur.com/zAyt4lX.jpg" alt="your image" height="100" />
    </form>
      <h1> Field Two </h1>
        <form id="form2" runat="server">
        <input type='file' id="imgInp2" />
        <br>
        <img id="form-pic-2" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Spider-Firework-Omiya-Japan.jpg/220px-Spider-Firework-Omiya-Japan.jpg" alt="your image" height="100" />
    </form>

---

但到目前为止，只有第一张图片出现了变化。第二个上传表单注册上传图片的名称，但不会显示缩略图。问题在于DOM中有多个元素具有相同的

id

属性，这是无效的。它们必须是独一无二的

要解决此问题，请将元素更改为使用公共类。然后，您可以在所有事件上使用单个事件处理程序。您还应该使用DOM遍历来查找与更改的文件输入相关的

.form pic

。试试这个：

$（“.imgInp”）.change（函数（）{
readURL（this）；
});
函数readURL（输入）{
var$formPic=$（input.sibbines（'img'）；
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
$formPic.attr（'src'，e.target.result）；
};
reader.readAsDataURL（input.files[0]）；
}
}

第一场


第二场

试试这个

在这个例子中，我做了两个图像预览，其余的你可以做

HTML代码

<h1>USER NEEDS 4 SEPARATE UPLOAD FIELDS</h1>
    <br>
    <br>
       <h1> Field One </h1>
    <form id="form1" runat="server">
        <input type='file' id="imgInp" />
        <br>
        <img id="form-pic-1" src="http://i.imgur.com/zAyt4lX.jpg" alt="your image" height="100" />
    </form>
      <h1> Field Two </h1>
        <form id="form2" runat="server">
        <input type='file' id="imgInp2" />
        <br>
        <img id="form-pic-2" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Spider-Firework-Omiya-Japan.jpg/220px-Spider-Firework-Omiya-Japan.jpg" alt="your image" height="100" />
    </form>

---

我让form-pic-1/form-pic-2独一无二。imgInp/imgInp2是唯一的。但我知道这不是最好的办法。谢谢我现在就试试。更新后的小提琴仍然不起作用，因此您的观点是有效的。抱歉，您需要使用

兄弟姐妹（）

，而不是

下一个（）

。我在回答中加入了一个有用的片段，谢谢。我会接受这个答案并发布一个工作提琴。我刚刚经历了这个。其他人发布了一个工作片段，所以我接受了。你的解决方案很优雅。干杯，谢谢你的投票。还有@Rory，他的回答很聪明，也很有条理，所以请跟着那把工作小提琴走，多亏了Rory Mcrossan。

<h1>USER NEEDS 4 SEPARATE UPLOAD FIELDS</h1>
    <br>
    <br>
       <h1> Field One </h1>
    <form id="form1" runat="server">
        <input type='file' id="imgInp" />
        <br>
        <img id="form-pic-1" src="http://i.imgur.com/zAyt4lX.jpg" alt="your image" height="100" />
    </form>
      <h1> Field Two </h1>
        <form id="form2" runat="server">
        <input type='file' id="imgInp2" />
        <br>
        <img id="form-pic-2" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Spider-Firework-Omiya-Japan.jpg/220px-Spider-Firework-Omiya-Japan.jpg" alt="your image" height="100" />
    </form>

function readURL(input,image_tag_id) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            console.log(image_tag_id);
            reader.onload = function (e) {
                $('#'+image_tag_id).attr('src', e.target.result);
            };


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


      $("#imgInp").change(function(){

        readURL(this,'form-pic-1');
    });

       $("#imgInp2").change(function(){

        readURL(this,'form-pic-2');
    });