Javascript 在页面中使用了两次多图像上载，但第一次有效，另一次无效

在单页中两次使用多个图像上载第一个图像上载正常工作第二个不工作我尝试过，但使用jquery的预览和删除选项无法修复。但两个图像都显示在单独的区域第一个图像上载显示在下面的第一个和第二个图像上载显示在下面的第二个JSFIDLE代码显示在下面的注释中你必须换身份证。它们应该是不同的。如更改第二个“输入[类型=文件]的id和输出的id”。

您必须更改id。它们应该是不同的。如更改第二个“输入[类型=文件]的id和输出的id”。

只需编写：

// edit the change event 
$('input:file').change(function(evt){
    handleFileSelect(evt);
}); 

只要写下：

// edit the change event 
$('input:file').change(function(evt){
    handleFileSelect(evt);
}); 

var计数=0；
功能手柄文件选择（evt，id）{
var$fileUpload=$（“输入#文件[type='file']）；
count=count+parseInt（$fileUpload.get（0.files.length））；
if（parseInt（$fileUpload.get（0.files.length）>6 | | count>5）{
警报（“您最多只能上载5个文件”）；
count=count parseInt（$fileUpload.get（0.files.length））；
evt.preventDefault（）；
evt.stopPropagation（）；
返回false；
}
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'）；
span.innerHTML=[''）.join（''）；
document.getElementById（id）.insertBefore（span，null）；
};
})（f） )；
reader.readAsDataURL（f）；
}
}
$（“#文件”）.change（函数（evt）{
handleFileSelect（evt，“列表”）；
});
$（'#files1'）.change（函数（evt）{
handleFileSelect（evt，'list1'）；
});
$（“#列表”）。在（'单击'，'上。删除预览'，函数（）{
$（this.parent（'span'）.remove（）；
//这不起作用。。。
var i=array.indexOf（$（this））；
如果（i！=-1）{
阵列拼接（i，1）；
}
//我也试过：
//$（this）.parent（'span'）.splice（1,1）；
计数--；
});

试试这个，它能用

var计数=0；
功能手柄文件选择（evt，id）{
var$fileUpload=$（“输入#文件[type='file']）；
count=count+parseInt（$fileUpload.get（0.files.length））；
if（parseInt（$fileUpload.get（0.files.length）>6 | | count>5）{
警报（“您最多只能上载5个文件”）；
count=count parseInt（$fileUpload.get（0.files.length））；
evt.preventDefault（）；
evt.stopPropagation（）；
返回false；
}
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'）；
span.innerHTML=[''）.join（''）；
document.getElementById（id）.insertBefore（span，null）；
};
})（f） )；
reader.readAsDataURL（f）；
}
}
$（“#文件”）.change（函数（evt）{
handleFileSelect（evt，“列表”）；
});
$（'#files1'）.change（函数（evt）{
handleFileSelect（evt，'list1'）；
});
$（“#列表”）。在（'单击'，'上。删除预览'，函数（）{
$（this.parent（'span'）.remove（）；
//这不起作用。。。
var i=array.indexOf（$（this））；
如果（i！=-1）{
阵列拼接（i，1）；
}
//我也试过：
//$（this）.parent（'span'）.splice（1,1）；
计数--；
});

---

试试这个，当您使用多个DOM元素而不是ID时，它会起作用。

使用class=“upload\u input”这样的类获取它们，并将JS应用于所有元素（由jQuery处理）。当您使用多个DOM元素而不是ID时，使用class=“upload\u input”这样的类获取它们，并将JS应用于所有元素（由jQuery处理）我不明白亲爱的达拉如果你不介意请帮我在js小提琴兄弟的图像显示都是单独的区域。第一张图片上传如下图所示，分别为第一张和第二张。第二个也是单独的，显示在第二个图像上载的下面。感谢您在上面只提到了图像上载的问题：）您没有提到上面的对齐问题。。谢谢：）Dhara Parmar请帮助我，我不理解代码，因为我是新来的。ThanksI已经更新了此JSFIDLE中图像显示问题的代码。试试这个：我不明白亲爱的达拉如果你不介意，请帮我在js小提琴兄弟的图像显示都是单独的区域。第一张图片上传如下图所示，分别为第一张和第二张。第二个也是单独的，显示在第二个图像上载的下面。感谢您在上面只提到了图像上载的问题：）您没有提到上面的对齐问题。。谢谢：）Dhara Parmar请帮助我，我不理解代码，因为我是新来的。ThanksI已经更新了此JSFIDLE中图像显示问题的代码。试试这个：兄弟它显示在单独的区域感谢这一点，但第二个图像上传删除选项不起作用感谢$（“#列表，#列表1”）。在（'click'，'上。删除#img#u预览'，函数（）{}）；添加此选项将在单独的区域中显示，谢谢，但第二个图像上载删除选项不起作用，谢谢$（“#列表，#列表1”）。在（'click'，'上。删除#img#u预览'，函数（）{}）；加上这个就行了