我有一个文件上传器，它为要上传的文件提供预览图像。有前端和后端验证，可防止在一次上传中提交超过10个文件。
我想做的是，当附加了10个以上的文件时，第10个以上图像的预览图像将从图像预览中删除（当前也有错误消息输出）。对于输入元素中的实际FileList文件，我有单独的功能，但应该能够使解决方案同时适用于这两个元素。
下面是问题的最小代码表示。如果需要，我可以显示完整的文件上传器代码，但有相当多的代码与此问题无关，这可能会让人困惑。
// Generate a preview <img> for each selected file
// the submitData.files array is generated from a change event listener on a file input elment
[...submitData.files].forEach(showFiles);
});
function showFiles(file) {
let previewImage = new Image();
previewImage.className = "img upload-preview-image";
previewImage.src = URL.createObjectURL(file);
// use decode() method that waits for individual preview images to be added when running validations
previewImage.decode().then((response) => {
// validations happen here for each image as part of the showFiles() function called in the forEach loop above
let imgList = document.querySelectorAll('.upload-preview-image'), // redeclare under new var name inside promise
if (imgList.length > 10) {
/***somehow remove all images from the imgList array after the 10th image,
either by deleting them or exiting this function when the 10th item is added***/
}
}).catch((encodingError) => {
// Do something with the error.
});
}
2条答案
按热度按时间bybem2ql1#
如果只想处理输入中的前10个文件，那么可以将它们从
submitData.files数组中切掉：bqujaahr2#
要从页面中删除
imgList（非活动节点列表）中除前10个节点外的所有选定节点，只需遍历列表并在相应项上调用.remove()即可。或者，您可以只循环浏览需要删除的内容：