Javascript 如何在多输入表单中检查文件上载的扩展名？

我要求用户在填写表单时上传4个不同的文件

以下是其中一个输入的示例：

  <div class="custom-file">
    <input type="file" class="custom-file-input" accept="video/*" id="video1" required>
    <label class="custom-file-label" for="video1"> drop the video</label>
  </div>

放下视频

我希望用户仅选择mp4文件类型。如果他们选择了错误的文件类型，我希望出现一个框。我不希望这个框出现在表单提交上，这是网络上所有解决方案似乎都要解决的问题

相反，当用户浏览某个文件，选择该文件，然后单击“打开”时，我希望出现一个框，告诉用户选择具有批准扩展名的文件

---

有没有一种方法可以代替在提交表单时执行此操作？

如果您不想显示任何警报，只需按如下所示更改输入标记即可

 <input type="file" class="custom-file-input" accept="video/mp4,video/x-m4v,video/*" id="video1" required>

放下视频

如果出现警报并单击“确定”，则可能重复-如何修改脚本以自动清除输入字段/？