HTMLInputElement: свойство webkitdirectory

Это свойство отражает атрибут webkitdirectory HTML и указывает, что элемент <input> должен позволять пользователю выбирать каталоги вместо файлов. При выборе каталога каталог и вся его иерархия содержимого включаются в набор выбранных элементов. Выбранные элементы файловой системы можно получить, используя свойство webkitEntries.

Примечание: Это свойство называется webkitdirectory в спецификации из-за своего происхождения как API, специфичного для Google Chrome. Возможно, оно когда-нибудь будет переименовано.

Значение

Булево значение; true если элемент <input> должен разрешать выбор только каталогов или false если должны выбираться только файлы.

Понимание результатов

После выбора пользователем каждого объекта File в files его свойство File.webkitRelativePath устанавливается в относительный путь внутри выбранного каталога, в котором находится файл. Например, рассмотрим такую файловую систему:

PhotoAlbums
- Birthdays
  - Jamie's 1st birthday
    - PIC1000.jpg
    - PIC1004.jpg
    - PIC1044.jpg
  - Don's 40th birthday
    - PIC2343.jpg
    - PIC2344.jpg
    - PIC2355.jpg
    - PIC2356.jpg
- Vacations
  - Mars
    - PIC5533.jpg
    - PIC5534.jpg
    - PIC5556.jpg
    - PIC5684.jpg
    - PIC5712.jpg

Если пользователь выбирает PhotoAlbums, тогда список, отдаваемый файлами, будет содержать объекты File для каждого файла, перечисленного выше, — но не каталоги. Для записи PIC2343.jpg будет webkitRelativePath PhotoAlbums/Birthdays/Don's 40th birthday/PIC2343.jpg. Это позволяет узнать иерархию, даже если FileList является плоским.

Примечание: Поведение webkitRelativePath отличается в Chromium < 72. Подробнее см. эту ошибку.

Примеры

В этом примере представлен выборщик каталога, который позволяет пользователю выбирать один или несколько каталогов. Когда происходит событие change, генерируется и отображается список всех файлов, содержащихся в выбранных иерархиях каталогов.

HTML

<input type="file" id="file-picker" name="fileList" webkitdirectory multiple />
<ul id="listing"></ul>

JavaScript

document.getElementById("file-picker").addEventListener(
  "change",
  (event) => {
    let output = document.getElementById("listing");
    for (const file of event.target.files) {
      let item = document.createElement("li");
      item.textContent = file.webkitRelativePath;
      output.appendChild(item);
    }
  },
  false,
);

Результат

Спецификации

Спецификация
API файлов и каталогов # dom-htmlinputelement-webkitdirectory

Совместимость с браузерами

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`webkitdirectory`	7	13	50	15	11.1	132 131 В Chrome для Android 131, если пользователь выбирает каталог, браузер терпит крах (см. ошибку 376834374). 18 Свойство отражает атрибут, но пользователи не могут выбрать каталог, только отдельные файлы (см. ошибку 40248532.	Нет	14 Свойство отражает атрибут, но пользователи не могут выбрать каталог, только отдельные файлы (см. ошибку 40248532.	Нет Свойство можно установить, но оно не оказывает никакого влияния.	1.0 Свойство отражает атрибут, но пользователи не могут выбрать каталог, только отдельные файлы (см. ошибку 40248532.	132 131 В Chrome для Android 131, если пользователь выбирает каталог, браузер терпит крах (см. ошибку 376834374). 4.4 Свойство отражает атрибут, но пользователи не могут выбрать каталог, только отдельные файлы (см. ошибку 40248532.

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory