代码之家 › 专栏 › 技术社区 › Oles Savluk

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

dom html javascript

Oles Savluk · 技术社区 · 6 年前

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

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

您可以将文件夹拖放到此输入中。但我如何知道用户是否删除了目录或常规文件?

3 回复 | 直到 6 年前

Iguatemi Garin 4 年前

选择目录时,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') {
        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>

leximus 6 年前

<input id="file" type="file" webkitdirectory directory multiple />

然后改变

Vinod 6 年前

可以使用“webkitGetAsEntry”方法检测目录,但不广泛支持 here is the reference

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

file.addEventListener('drop',onDrop);

function onDrop(e) {
  e.preventDefault();
  e.stopPropagation();

  var items = e.dataTransfer.items;
  var files = e.dataTransfer.files;
	var result = [];
  
  for (var i = 0, item; item = items[i]; ++i) {

    var entry = item.webkitGetAsEntry();
    var obj = {
			name: entry.name,
			isDirectory: entry.isDirectory,
			isFile: entry.isFile
		}
    result.push(obj);
  }
  
  console.log(result);
  return result;
}

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

推荐文章

Ezz Deghedy · 如何获取数据和读取响应

1 年前

StuP · 响应式Vue组件在数据更改时不更新

2 年前

burr · 让jQuery选择器识别新添加的DOM元素[关闭]

2 年前

viboven · Javascript DOM未从ID检测到按钮,表示其为null[已关闭]

2 年前

Toufique E Joarder · 将<li>移动到第n个位置并使用JavaScript更改href链接

2 年前

HASEEB ALAM RAFIQ · 如何在react中获取QuerySelector所有html元素?

2 年前

J. Hu · “表单提交已取消,因为表单未连接”[重复]

6 年前

pploypiti · 选择所有其他ID不是“this”的元素。id'

6 年前

xiaolingxiao · 导航到页面后运行javascript

6 年前

Voodoobear · 如何将数字变量插入replaceWith(JavaScript)

6 年前