Как проверить, является ли выбранный файл каталогом или обычным файлом?

у меня есть следующий ввод файла:

const file = document.getElementById('file');
file.addEventListener('change', e => {
  console.log(e.target.files[0]);
});
<input id="file" type="file" />
Вы можете перетащить папку в этот вход. Но как узнать, сбросил ли пользователь каталог или обычный файл?
7
dom html javascript

3 ответов

когда каталог выбран, FileReader не может прочитать его содержимое, поэтому возникает ошибка. Вот пример того, как вы могли бы реализовать Файл Валидатор для добавления.

этот пример имеет полный suport на всех современных браузерах.

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>
1

вы должны предоставить дополнительные атрибуты для ввода тега 

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

затем изменить событие предоставит вам информацию обо всех файлах внутри вашей папки с пути к файлу внутри объекта файла (но не о самой папке).

2

каталог может быть обнаружен с помощью метода "webkitGetAsEntry", но он не поддерживается широко вот ссылка 

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" />
1