javascript - react : input type "file" ignores `accept` property when you upload files using drag and drop

Question

我使用 <input type="file" accept=".txt" />与接受属性(property)。例如，我将其设置为仅接受 .txt文件。如果您单击 input，效果很好并打开选择器，您不能上传 accept 不允许的文件.

但是，当您通过 drag & drop 上传文件时它上传任何忽略 accept 的文件.

举个例子: https://codesandbox.io/s/floral-tdd-11wt9?file=/src/App.js

重现问题:

• 从您的桌面拖动任何文件，期望.txt
• 移动并放入输入
• 您会看到一个文件名(但不应上传)

问:解决这个问题的最佳方法是什么？考虑到可能有任何文件类型和标准 file.type提供有关文件类型的过多信息。

Answer 1

当您添加接受时，浏览器会告诉操作系统仅显示提到但不支持的文件，但是当您进行拖放时，此功能将被消除，最好的方法是编写一个验证器函数来检查给定的文件是否受支持，例如

 const handleChange = (e) => {
const newFiles = e.target.files;
const fileName = newFiles[0].name;
const extension = fileName.split(".").pop();
const isSupported = ["txt"].includes(extension);
if (!isSupported) {
  alert("not supported");
  setFiles(null);
  e.target.value = null;
} else {
  setFiles(newFiles);
}

};

这里使用["txt"].includes(extension) 的好处是，你可以为多种文件类型添加验证，我只是用 e.target 重置了输入。 value = null;(当文件无效时)，但你可以在那里使用你自己的逻辑

这是一个有效的 example