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

BCD tables only load in the browser

Siehe auch