HTMLInputElement: webkitdirectory Eigenschaft

Die webkitdirectory Eigenschaft des HTMLInputElement Interfaces spiegelt das webkitdirectory HTML-Attribut wider, welches anzeigt, dass <input type="file"> Elemente es dem Benutzer ermöglichen sollen, Verzeichnisse anstelle von Dateien auszuwählen.

Wenn ein Verzeichnis ausgewählt wird, werden das Verzeichnis und seine gesamte Inhalts-Hierarchie in die Menge der ausgewählten Elemente aufgenommen. Die ausgewählten Dateisystemeinträge können über die webkitEntries Eigenschaft abgerufen werden.

Hinweis: Diese Eigenschaft wird webkitdirectory genannt aufgrund ihrer Ursprünge als Google Chrome-spezifische API. Es ist wahrscheinlich, dass sie irgendwann umbenannt wird.

Wert

Ein Boolean; true wenn das <input> Element nur die Auswahl von Verzeichnissen ermöglichen soll, oder false, wenn nur Dateien auswählbar sein sollen.

Beschreibung

Das Setzen von webkitdirectory auf true bewirkt, dass das Eingabefeld den Benutzern Verzeichnisse zur Auswahl anbietet anstatt Dateien.

Nachdem der Benutzer eine Auswahl getroffen hat, hat jedes File Objekt in files seine File.webkitRelativePath Eigenschaft auf den relativen Pfad innerhalb des ausgewählten Verzeichnisses gesetzt, an dem sich die Datei befindet.

Betrachten Sie beispielsweise dieses Dateisystem:

PhotoAlbums
- Birthdays
  - Jamies 1. Geburtstag
    - PIC1000.jpg
    - PIC1004.jpg
    - PIC1044.jpg
  - Dons 40. Geburtstag
    - PIC2343.jpg
    - PIC2344.jpg
    - PIC2355.jpg
    - PIC2356.jpg
- Vacations
  - Mars
    - PIC5533.jpg
    - PIC5534.jpg
    - PIC5556.jpg
    - PIC5684.jpg
    - PIC5712.jpg

Wenn der Benutzer PhotoAlbums auswählt, enthält die von files gemeldete Liste File Objekte für jede oben aufgeführte Datei—jedoch nicht die Verzeichnisse. Der Eintrag für PIC2343.jpg wird einen webkitRelativePath von PhotoAlbums/Birthdays/Don's 40th birthday/PIC2343.jpg haben. Dies ermöglicht es, die Hierarchie zu kennen, obwohl die FileList flach ist.

Hinweis: Das Verhalten von webkitRelativePath ist in Chromium < 72 unterschiedlich. Siehe dieses Problem für weitere Details.

Beispiele

In diesem Beispiel wird ein Verzeichniswähler präsentiert, der es dem Benutzer ermöglicht, ein oder mehrere Verzeichnisse zu wählen. Wenn das change Ereignis auftritt, wird eine Liste aller Dateien innerhalb der ausgewählten Verzeichnishierarchien erstellt und angezeigt.

HTML

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,
);

Ergebnis

Spezifikationen

Specification
File and Directory Entries API # dom-htmlinputelement-webkitdirectory