接受在反应中的文件类型中不起作用答案

【问题标题】：accept is not working in file type in react接受在反应中的文件类型中不起作用
【发布时间】：2022-06-11 06:36:54
【问题描述】：

我正在创建一个文件上传组件，其中我必须只允许 xls 或 xlsx 文件。我正在编写以下代码。

      <div>
        <form onSubmit={handleSubmit}>
          <input type="file" accept="xlsx/*" required  onChange={handleChange}/>
          <button type="submit" className='submitbutton'>Import Bulk User</button>
        </form>
      </div>

但它不限制其他文件类型。

如何限制其他文件类型，只允许xlsx

【问题讨论】：

标签： html reactjs react-native file user-interface

【解决方案1】：

您仍然可以使用您的处理程序函数来验证文件扩展名。

获取文件扩展名

 event.target.files[0].name.split(".")[1];

然后检查它是否支持

if (allowedExtension.includes(fileExtension)) {
    console.info("correct file uploaded!");
    // set file to state
    setUploadedFile(file);
} else {
    console.error("incorrect file extension");
    // show error
}

DEMO

【讨论】：

【解决方案2】：

您应该更新输入的accept 属性，如下所示：

<input type="file" accept=".xls,.xlsx" required  onChange={handleChange}/>

【讨论】：

【解决方案3】：

accept attribute 将一个或多个文件类型或唯一文件类型说明符的逗号分隔列表作为其值，描述允许的文件类型：

<input type="file" accept=".xlsx, .xls" required  onChange={handleChange}/>

【讨论】：