Diewebkitdirectory Eigenschaft derHTMLInputElement Schnittstelle spiegelt daswebkitdirectory HTML-Attribut wider, das angibt, dass<input type="file"> Elemente nur Verzeichnisse statt Dateien auswählen können.

Wenn ein Verzeichnis ausgewählt wird, werden das Verzeichnis und seine gesamte Inhaltsstruktur in die Gruppe der ausgewählten Elemente eingeschlossen.Die ausgewählten Dateisystemeinträge können über diewebkitEntries Eigenschaft abgerufen werden.

Wert

Ein Boolean;true, wenn das<input> Element nur die Auswahl von Verzeichnissen erlauben soll, oderfalse, wenn nur Dateien wählbar sein sollen.

Beschreibung

Wennwebkitdirectory auftrue gesetzt wird, bietet das Eingabeelement Verzeichnisse zur Auswahl an, statt Dateien.Nachdem der Benutzer ein Verzeichnis ausgewählt hat, wird dieFile Eigenschaft in den zurückgegebenenfiles Objekten mit demFile.webkitRelativePath Attribut auf einen Pfad relativ zum ausgewählten Überverzeichnis gesetzt.Betrachten Sie zum Beispiel dieses Dateisystem:

PhotoAlbums├── Birthdays│   ├── Jamie's 1st birthday│   │   ├── PIC1000.jpg│   │   └── PIC1044.jpg│   └── Don's 40th birthday│       ├── PIC2343.jpg│       └── PIC2356.jpg└── Vacations    └── Mars        ├── PIC5556.jpg        ├── PIC5684.jpg        └── PIC5712.jpg

Wenn der Benutzer das VerzeichnisPhotoAlbums auswählt, enthält die durchfiles gemeldete ListeFile Objekte für jede Datei.Der Eintrag fürPIC2343.jpg hat einenwebkitRelativePath vonPhotoAlbums/Birthdays/Don's 40th birthday/PIC2343.jpg.Dies macht es möglich, die Hierarchie des ausgewählten Verzeichnisses zu bestimmen, obwohl dieFileList flach ist.

Beispiele

In diesem Beispiel wird ein Verzeichnisauswahlfeld präsentiert, das es dem Benutzer ermöglicht, ein oder mehrere Verzeichnisse auszuwählen.Wenn daschange Ereignis eintritt, wird eine Liste aller in den ausgewählten Verzeichnishierarchien enthaltenen Dateien erstellt und angezeigt.

HTML

<input type="file" name="fileList" webkitdirectory multiple /><ul></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);  }});

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• File and Directory Entries API
• HTMLInputElement.webkitEntries
• File.webkitRelativePath