Javascript 带预览的多图像上传器

我已经创建了一个图像上传程序，但它不能正常工作。我不明白我错在哪里。 我的图像上传程序的

JSFIDDLE

如下所示：

---

我面临的问题是，当我单击“选择文件”并选择多个文件并打开它时，我希望它显示我选择的所有图像的预览，并且它工作正常，但当我单击“删除”按钮时，它只删除预览，这意味着如果我提交文件，即使是我已删除的文件也会上载。另一方面，我必须点击“添加更多图像”按钮创建一个以上相同的上传程序，但当我添加多个图像时，它不会显示任何预览，因此我甚至无法选择或删除错误选择的图像。谁能找到我哪里出了问题。我还需要“添加更多图像”按钮，这样，如果我们忘记添加一些图像，或者图像位于不同的目录中，我们可以调用一个或多个输入类型文件，其功能应与前面相同。

因此，您做了一些奇怪的事情（就像使用一个全局变量，并为其指定一个整数，我假设您使用它来跟踪对象）

我已经清理了您正在进行的工作，并删除了一些冗余功能。本质上，您需要更好地利用该功能。您需要仔细查看您的按钮；因为我没有为您修复它们。；）

您需要做的是遍历

this.files

数组，并使用

FileReader（）

函数显示结果。代码如下

$（“#添加更多”）。单击（函数（）{
“严格使用”；
$（此）。在（$（“”）之前{
id:'filediv'
}).fadeIn（'slow'）.append(
$("", {
名称：“文件[]”，
键入：“文件”，
id:'文件'，
多个：“多个”，
接受：'image/*'
})
));
});
$（“#上载”）。单击（函数（e）{
“严格使用”；
e、 预防默认值（）；
if（window.filesToUpload.length==0 | | typeof window.filesToUpload==“未定义”）{
警报（“未选择任何文件”）；
返回false；
}
//现在，上传下面的文件。。。
// https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications#Handling_the_upload_process_for_a_file.2C_asynchronously
});
函数删除预览（ele，i）{
“严格使用”；
试一试{
$（ele.parent（）.remove（）；
window.filesToUpload.splice（i，1）；
}捕获（e）{
控制台日志（e.message）；
}
}
$（“#文件”）.on（'change'，function（）{
“严格使用”；
//为要驻留的文件创建空数组。
window.filesToUpload=[]；
如果（this.files.length>=1）{
$（“[id^=previewImg]”。删除（）；
$.each（this.files，function（i，img）{
var reader=new FileReader（），
新元素=$（“
#formdiv{
文本对齐：居中；
}
#文件{
颜色：绿色；
填充物：5px；
边框：1px虚线#123456；
背景色：#f9ffe5；
}
#img{
宽度：17px；
边界：无；
高度：17px；
左边距：-20px；
边缘底部：191px；
}
.上传{
宽度：100%；
高度：30px；
}
.abcd{
文本对齐：居中；
位置：相对位置；
}
.abcd img{
高度：200px；
宽度：200px；
填充物：5px；
边框：1px实心rgb（232、222、189）；
}
.删除{
颜色：红色；
字体大小：粗体；
位置：绝对位置；
排名：0；
光标：指针
}



这是我第一次为StackOverflow做贡献。我希望这对其他人有所帮助。我对web开发相当陌生。但是，如果有人能将javascript代码变成一个循环，我将不胜感激。下面的代码可以使用其独特的name=“name”；


函数showPreviewOne（事件）{
如果（event.target.files.length>0）{
让src=URL.createObjectURL（event.target.files[0]）；
让preview=document.getElementById（“file-ip-1-preview”）；
preview.src=src；
preview.style.display=“block”；
} 
}
函数myImgRemoveFunctionOne（）{
document.getElementById（“file-ip-1-preview”）.src=“https://i.ibb.co/ZVFsg37/default.png";
}
/* **************************************************************************************** */
函数showPreviewTwo（事件）{
如果（event.target.files.length>0）{
让src=URL.createObjectURL（event.target.files[0]）；
让preview=document.getElementById（“file-ip-2-preview”）；
preview.src=src；
preview.style.display=“block”；
} 
}
函数myImgRemoveFunctionTwo（）{
document.getElementById（“file-ip-2-preview”）.src=“https://i.ibb.co/ZVFsg37/default.png";
}
/* **************************************************************************************************** */
函数showPreviewThree（事件）{
如果（event.target.files.length>0）{
让src=URL.createObjectURL（event.target.files[0]）；
让preview=document.getElementById（“file-ip-3-preview”）；
preview.src=src；
preview.style.display=“block”；
} 
}
函数myImgRemoveFunctionThree（）{
document.getElementById（“file-ip-3-preview”）.src=“https://i.ibb.co/ZVFsg37/default.png";
}
/* **************************************************************************************************** */
函数showPreviewFour（事件）{
如果（event.target.files.length>0）{
让src=URL.createObjectURL（event.target.files[0]）；
让preview=document.getElementById（“file-ip-4-preview”）；
preview.src=src；
preview.style.display=“block”；
} 
}
函数myImgRemoveFunctionFour（）{
document.getElementById（“file-ip-4-preview”）.src=“https://i.ibb.co/ZVFsg37/default.png";
}
/* ****************************************************************************