接受不在react中的文件类型中工作

Question

我正在创建一个文件上传组件，其中我必须仅允许XLS或xlsx file.i am在下面写作代码。

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

但这并不限制其他文件类型。

我如何限制其他文件类型，仅允许XLSX

Answer 1

接受属性作为其价值comma-- comma---一种或多种文件类型或唯一文件类型指定符的分离列表，描述了要允许的文件类型：

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

Answer 2

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

获取文件扩展名

 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
}

演示

Answer 3

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

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

更多有关接受： https://developer.mozilla.org/en-us/docs/web/html/attributes/accept