时间戳

首页 > 解决方案 > 如何在多输入表单中检查文件上传的扩展名？

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 文件类型。如果他们选择了错误的文件类型，我希望出现一个框。我不希望这个框出现在表单提交中，这是网络上所有解决方案似乎都可以解决的问题。

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

有没有办法做到这一点，而不是在提交表单的时候？

标签： javascripthtml

解决方案

如果您不想显示任何警报，您可以简单地更改输入标签，如下所示

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

如果您真的想显示一条消息，您可以使用 oninput 属性调用警报。尝试关注 

 function inputHandler(value)
      {
       if(!value.endsWith("mp4"))
       {
           alert("only mp4 is allowed");
       }
      }
<div class="custom-file">
      <input
        type="file"
        class="custom-file-input"
        accept="video/*"
        id="video1"
        required
        oninput="inputHandler(this.value)"
      />
      <label class="custom-file-label" for="video1"> drop the video</label>
    </div>

推荐阅读