微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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>

原文地址:https://www.jb51.cc/js/157584.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐