将JavaScript生成的图像预览按文件名数字顺序排序（文件为1-xxx、2-xxx等）

使用我在这里找到的JS代码片段，我可以在上传之前预览图像，下面是代码

函数预览图像（）{
var preview=document.querySelector（“#preview”）；
if（this.files）{
[].forEach.call（this.files，readAndPreview）；
}
函数readAndPreview（文件）{
//确保'file.name'符合我们的扩展标准
if（！/\（jpe？g | png | gif）$/i.test（file.name））{
返回警报（file.name+“不是图像”）；
}//否则。。。
var reader=new FileReader（）；
reader.addEventListener（“加载”，函数（）{
var image=新图像（）；
image.height=85；
image.title=file.name；
image.src=this.result；
预览。追加子对象（图像）；
});
reader.readAsDataURL（文件）；
}
}
document.querySelector（“#文件输入”）.addEventListener（“更改”，预览图像）
由于文件名以数字开头，因此可以使用
parseInt
将前导部分转换为数字，并对其进行排序。例如：


const图像=[
“1-黑色”、“12-橙色”、“2-红色”、“22-绿色”、“3-蓝色”、“31-黄色”
];
排序（（a，b）=>parseInt（a）-parseInt（b））；
控制台日志（图像）
文件名结构是否始终与1-xxx和3-xxx相同？@Alwayshelving是的，文件名将始终以数字开头，顺序与显示顺序相同。1-xxx，2-xxx，3-xxx等必须确认它是
-红色
-黑色
等标题，无论它们是从文件夹中选择的，都要按字母顺序显示吗？@AlwayShelling，不，这是我需要的数字，所以我现在考虑一下，也许应该编辑一下，说数字顺序！小提示：分机不会告诉你它是否是图像。每种格式都有自己的幻数/头代码。我如何将其插入到上面的示例代码中呢？很难确定，但如果（this.files）

您将放入

this.files.sort（（a，b）=>parseInt（a）-parseInt（b））

在

[].forEach.call（this.files，readAndPreview）之前