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

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

0 голосов
/ 05 октября 2018

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

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

Ответы [ 3 ]

0 голосов
/ 05 октября 2018

каталог может быть обнаружен методом "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" />
0 голосов
/ 05 октября 2018

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

Этот пример имеет полную поддержку во всех современных браузерах. 

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>
0 голосов
/ 05 октября 2018

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...