javascript - 如何检查所选文件是目录还是常规文件?

标签 javascript html dom

我有以下文件输入:

const file = document.getElementById('file');
file.addEventListener('change', e => {
  console.log(e.target.files[0]);
});
<input id="file" type="file" />
您可以将文件夹拖放到此输入中。但是,我如何知道用户删除的是目录还是常规文件?

最佳答案

[编辑] 添加了错误名称检查。 感谢@Cid 和@DanielCuadra 的建议。

当一个目录被选中时,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 &&
                (
                    reader.error.name === 'NotFoundError' ||
                    reader.error.name === 'NotReadableError'
                )) {
                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 - 如何检查所选文件是目录还是常规文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52667995/

相关文章:

javascript - 使用 jQuery 切换单个 Div 层

html - CSS——链接 :hover color inheritance issue

javascript - 在 Greasemonkey 脚本中循环添加图像和鼠标悬停事件?

javascript - jQuery:选择指定元素之前的最后一个匹配项

javascript - Scrollspy 效果停止工作

javascript - 在 DataTable 中放置一个 YUI 按钮

javascript - 使用单词边界

javascript - 在显示在屏幕上之前获取渲染元素的高度(ReactJS)

css - 根据左 div 的高度使右 div 重复背景

JavaScript:将节点复制到 DocumentFragment