我有以下文件输入:
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/