javascript – 如何检查所选文件是目录还是常规文件？

我有以下文件输入：

const file = document.getElementById('file');
file.addEventListener('change',e => {
  console.log(e.target.files[0]);
});

<input id="file" type="file" />

您可以将文件夹拖放到此输入中.但是,如何知道用户是丢弃目录还是常规文件？

解决方法

选择目录时,FileReader无法读取其内容,因此会产生错误.以下是如何为上载实现文件验证器的示例.

这个例子对所有现代浏览器都有完整的支持.

const input = document.querySelector('input')
input.onchange = (e) => {
  const file = input.files[0]
  isThisAFile(file)
  .then(validFile => console.log('Woohoo! Got a File:',validFile))
  .catch(error => console.log('Bummer,looks like a dir:',file,error))

}
function isThisAFile(maybeFile) {
  return new Promise(function (resolve,reject) {
    if (maybeFile.type !== '') {
      return resolve(maybeFile)
    }
    const reader = new FileReader()
    reader.onloadend = () => {
      if (reader.error) {
        return reject(reader.error.name)
      }
      resolve(maybeFile)
    }
    reader.readAsBinaryString(maybeFile)
  })
}

<!DOCTYPE html>
<html lang="en">
<head>
  <Meta charset="UTF-8">
  <Meta name="viewport" content="width=device-width,initial-scale=1.0">
  <Meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <input type="file" />
</body>
</html>

javascript – 如何检查所选文件是目录还是常规文件？

解决方法

相关文章