HTMLInputElement: webkitdirectory Eigenschaft

Baseline 2025

Neu verfügbar

Seit August 2025 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.

Die webkitdirectory Eigenschaft der HTMLInputElement Schnittstelle 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 Inhaltsstruktur in die Gruppe der ausgewählten Elemente eingeschlossen. Die ausgewählten Dateisystemeinträge können über die webkitEntries Eigenschaft abgerufen werden.

Hinweis: Diese Eigenschaft wird in der Spezifikation webkitdirectory genannt, weil sie ursprünglich eine Google Chrome-spezifische API war.

In diesem Artikel

Wert

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

Beschreibung

Wenn webkitdirectory auf true gesetzt wird, bietet das Eingabeelement Verzeichnisse zur Auswahl an, statt Dateien. Nachdem der Benutzer ein Verzeichnis ausgewählt hat, wird die File Eigenschaft in den zurückgegebenen files Objekten mit dem File.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 Verzeichnis PhotoAlbums auswählt, enthält die durch files gemeldete Liste File Objekte für jede Datei. Der Eintrag für PIC2343.jpg hat einen webkitRelativePath von PhotoAlbums/Birthdays/Don's 40th birthday/PIC2343.jpg. Dies macht es möglich, die Hierarchie des ausgewählten Verzeichnisses zu bestimmen, obwohl die FileList flach ist.

Hinweis: Das Verhalten von webkitRelativePath ist in Chromium < 72 unterschiedlich. Weitere Details finden Sie in diesem Fehlerbericht.

Beispiele

In diesem Beispiel wird ein Verzeichnisauswahlfeld präsentiert, das es dem Benutzer ermöglicht, ein oder mehrere Verzeichnisse auszuwählen. Wenn das change Ereignis eintritt, wird eine Liste aller in den ausgewählten Verzeichnishierarchien enthaltenen Dateien erstellt 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);
  }
});

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

File and Directory Entries API
HTMLInputElement
Instanzeigenschaften
Instanzmethoden
Events
Vererbung
Verwandte Seiten für File and Directory Entries API

HTMLInputElement: webkitdirectory Eigenschaft

In diesem Artikel

Wert

Beschreibung

Beispiele

HTML

JavaScript

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

Help improve MDN