Javascript 拖放时如何检查文件扩展名

我已经完成了一个可以接受多个文件的上传文件，但我当前的问题是当用户拖放多个文件时，它会接受图像文件以外的其他文档类型文件。下面是我的代码：

 <div class="row">
       <div class="col-lg-12">
           <label class="fieldlabels">Photos:</label> 
              <!--input type="file" name="pic" accept="image/*"-->
                                        
            <input type="file" class="form-control" id="file_name2"  onchange="return fileValidation2()" name="file_name2" value="" title="Photos" accept="image/*" multiple="true"/>        
                                        <table class="table table-striped table-bordered" style="width:100%;" id="add_files2">
                       <thead>
                           <tr>
                  <th style="color:blue; text-align:center;">File Name</th>
                  <th style="color:blue; text-align:center;">Status</th>
                  <th style="color:blue; text-align:center;">File Size</th>
                  <th style="color:blue; text-align:center;">Type</th>
                  <th style="color:blue; text-align:center;">Action</th>
               </tr>
        </thead>
      <tbody>
 </tbody>
/table>
</div>
</div>

照片：
文件名
地位
文件大小
类型
行动
/表>

以下是我迄今为止完成的脚本：

function fileValidation2(){
    var fileInput = document.getElementById('file_name2');
    var filePath = fileInput.value;
    var allowedExtensions = /(\.jpg|\.jpeg|\.png|\.tiff|\.tif)$/i;
    if(!allowedExtensions.exec(filePath)){
        alert('Please upload file having extensions .jpeg/.jpg/.png/.tiff/.tif/.xlsx/.pdf/.xls/.docx/.doc/.bump only.');
        fileInput.value = '';
        return false;
    }else{
        //Image preview
        if (fileInput.files && fileInput.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('imagePreview').innerHTML = '<img src="'+e.target.result+'"/>';
            };
            reader.readAsDataURL(fileInput.files[0]);
        }
    }
}

函数fileValidation2（）{
var fileInput=document.getElementById（'file_name2'）；
var filePath=fileInput.value；
var allowedExtensions=/（\.jpg\.jpeg\.png\.tiff\.tif）$/i；
如果（！allowedExtensions.exec（文件路径））{
警报（'请仅上载扩展名为.jpeg/.jpg/.png/.tiff/.tif/.xlsx/.pdf/.xls/.docx/.doc/.bump的文件'）；
fileInput.value=''；
返回false；
}否则{
//图像预览
if（fileInput.files&&fileInput.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
document.getElementById（'imagePreview'）。innerHTML=''；
};
reader.readAsDataURL（fileInput.files[0]）；
}
}
}

当用户单击输入文件中的“选择文件”时，它工作得非常好，但当用户拖放多个包含图像旁边的文件时，它仍然包含在其中。有人知道如何解决这个问题吗？提前谢谢

---

当用户拖放多个文件时，zip文件和其他文件仍然包括在内。

您必须覆盖事件

dragover

和

drop

，这些事件有一个

dataTransfer.files

字段，该字段与文件输入

files

的界面相同，

文件列表

const tbl=document.getElementById（'file-table'））
函数formatSize（n）{
for（常量单位为['B'、'kB'、'MB'、'GB'、'TB']）{
如果（n>1024）{
n/=1024；
}否则{
如果（n<10）{
返回n.toFixed（2）+单位
}否则{
返回n.toFixed（0）+单位；
}
}
}
}
函数fileValidation2（文件）{
//从事件目标获取文件输入
var allowedExtensions=/（\.jpg\.jpeg\.png\.tiff\.tif）$/i；
for（文件的常量文件）{
如果（！allowedExtensions.exec（file.name））{
警报（'请仅上载扩展名为.jpeg/.jpg/.png/.tiff/.tif/.xlsx/.pdf/.xls/.docx/.doc/.bump的文件'）；
fileInput.value=''；
返回false；
}否则{
//图像预览
如果（文件）{
var reader=new FileReader（）；
reader.onload=函数（e）{
//向文件表中添加一行
const row=tbl.insertRow（）
//创建预览元素
常量img=document.createElement（'img'）
img.src=e.target.result；
img.classList.add（'preview'）//样式
row.insertCell（）.appendChild（img）；
row.insertCell（）.innerText=file.name；
//你来决定怎么做
row.insertCell（）.innerText='pending'；
//file.size的大小以字节为单位，使其易于阅读
row.insertCell（）.innerText=formatSize（file.size）
//获取文件扩展名的技巧获取
//从被点分割的字符串中获得的数组。
row.insertCell（）.innerText=file.name.split（'.'）.pop（）
//你来决定怎么做
row.insertCell（）.innerText='？？'
};
reader.readAsDataURL（文件）；
}
}
}
}
const row=tbl.insertRow（）；
常量单元格=行。插入单元格（）
document.getElementById（'file_name2'）
.addEventListener（'change'，（e）=>fileValidation2（e.target.files））
document.body.addEventListener（'dragover'，（e）=>{
e、 预防默认值（）
e、 停止传播（）
如果（如dataTransfer.files）{
//在这里，您可以从文件中获取信息
//甚至在扔掉它们之前
document.body.classList.add（'文件'）
}
})
document.body.addEventListener（'dragleave'，（e）=>{
e、 预防默认值（）
e、 停止传播（）
document.body.classList.remove（'files'）；
})
document.body.addEventListener（'drop'，（e）=>{
如果（如dataTransfer.files）{
e、 预防默认值（）；
e、 停止传播（）
fileValidation2（例如dataTransfer.files）；
document.body.classList.remove（'文件'）
}
})

#文件表th{
颜色：蓝色；
文本对齐：居中；
}
图像预览{
最大宽度：4e；
最大高度：4em；
}
body.files{
背景色：#E0FF；
边框：3mm纯黑；
}

照片：
预览
文件名
地位
文件大小
类型
行动

如果（！allowedExtensions.exec（fileInput.files[0].name））{return；}您至少可以使用“便宜版”并在循环中再次使用以前使用的方法？谢谢