HTMLInputElement: webkitdirectory-Eigenschaft
Die webkitdirectory-Eigenschaft des HTMLInputElement-Interfaces spiegelt das webkitdirectory 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 Inhalts-Hierarchie in die Menge der ausgewählten Elemente aufgenommen. Die ausgewählten Dateisystemeinträge können mit der webkitEntries-Eigenschaft abgerufen werden.
Hinweis:
Diese Eigenschaft wird in der Spezifikation webkitdirectory genannt, da sie ursprünglich eine Google Chrome-spezifische API war.
Wert
Ein Boolean; true, wenn das <input>-Element nur das Auswählen von Verzeichnissen erlauben soll, oder false, wenn nur Dateien auswählbar sein sollen.
Beschreibung
Wenn webkitdirectory auf true gesetzt ist, bietet das Eingabeelement Verzeichnisse zur Auswahl für den Benutzer an, anstatt Dateien. Nachdem der Benutzer ein Verzeichnis ausgewählt hat, hat jedes File-Objekt in den zurückgegebenen files seine File.webkitRelativePath-Eigenschaft auf einen Pfad relativ zum ausgewählten übergeordneten Verzeichnis gesetzt. Zum Beispiel, betrachten Sie 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 PhotoAlbums-Verzeichnis auswählt, wird die Liste der durch Dateien gemeldeten File-Objekte für jede Datei enthalten. Der Eintrag für PIC2343.jpg wird einen webkitRelativePath von PhotoAlbums/Birthdays/Don's 40th birthday/PIC2343.jpg haben. Dies macht es möglich, die Hierarchie des ausgewählten Verzeichnisses zu bestimmen, auch wenn 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 Verzeichnisauswahlelement präsentiert, das es dem Benutzer erlaubt, ein oder mehrere Verzeichnisse auszuwählen. Wenn das change-Ereignis auftritt, wird eine Liste aller Dateien innerhalb der ausgewählten Verzeichnishierarchien erstellt und angezeigt.
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 |
Browser-Kompatibilität
Loading…