HTMLInputElement: webkitdirectory-Eigenschaft

Die HTMLInputElement.webkitdirectory ist eine Eigenschaft, die das webkitdirectory HTML-Attribut widerspiegelt und angibt, dass das <input>-Element dem Benutzer erlauben sollte, Verzeichnisse statt Dateien auszuwählen. Wenn ein Verzeichnis ausgewählt wird, sind das Verzeichnis und dessen gesamte Hierarchie des Inhalts in der Menge der ausgewählten Elemente enthalten. Die ausgewählten Dateisystemeinträge können über die webkitEntries-Eigenschaft abgerufen werden.

Hinweis: Diese Eigenschaft wird in der Spezifikation webkitdirectory genannt aufgrund ihrer Herkunft als Google Chrome-spezifische API. Es ist wahrscheinlich, dass sie eines Tages umbenannt wird.

Wert

Ein Boolean; true, wenn das <input>-Element nur die Auswahl von Verzeichnissen erlauben sollte, oder false, wenn nur Dateien auswählbar sein sollten.

Verständnis der Ergebnisse

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:

  • Fotoalben

    • Geburtstage

      • Jamies 1. Geburtstag

        • PIC1000.jpg
        • PIC1004.jpg
        • PIC1044.jpg
      • Dons 40. Geburtstag

        • PIC2343.jpg
        • PIC2344.jpg
        • PIC2355.jpg
        • PIC2356.jpg
    • Urlaub

      • Mars

        • PIC5533.jpg
        • PIC5534.jpg
        • PIC5556.jpg
        • PIC5684.jpg
        • PIC5712.jpg

Wenn der Benutzer Fotoalben auswählt, enthält die von files gemeldete Liste File-Objekte für jede oben aufgeführte Datei – aber nicht die Verzeichnisse. Der Eintrag für PIC2343.jpg wird einen webkitRelativePath von Fotoalben/Geburtstage/Dons 40. Geburtstag/PIC2343.jpg haben. Dies macht es möglich, die Hierarchie zu kennen, auch wenn die FileList flach ist.

Hinweis: Das Verhalten von webkitRelativePath ist unterschiedlich in Chromium < 72. Sehen Sie diesen Fehler für weitere Details.

Beispiele

In diesem Beispiel wird ein Verzeichniswähler präsentiert, der dem Benutzer erlaubt, ein oder mehrere Verzeichnisse auszuwählen. Wenn das change-Ereignis auftritt, wird eine Liste aller Dateien erstellt, die sich in den ausgewählten Verzeichnishierarchien befinden, und angezeigt.

HTML

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

JavaScript

js
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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
webkitdirectory

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
See implementation notes.
Has more compatibility info.

Siehe auch