Question

我输入了以下文件：

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

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

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

Answer 1

您应该为输入标签提供其他属性

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

然后 change 事件将为您提供有关文件夹内所有文件的信息以及文件对象内的文件路径（而不是文件夹本身）。

Answer 2

可以使用“ 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" />

Answer 3

选择目录后，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>

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

3 个答案: