HTML-Tools

Kostenlose Directory Upload Input Generator

Generieren Sie HTML-Datei-Inputs mit webkitdirectory fur Ordner-Upload, Drag-and-Drop-Zone und Dateiliste mit webkitRelativePath.

Tool wird geladen...

Was ist Directory Upload Input Generator?

Das webkitdirectory-Attribut an einem input type=file-Element ermöglicht Benutzern die Auswahl eines gesamten Ordners anstelle einzelner Dateien. Wenn ein Ordner ausgewählt wird, füllt der Browser die input.files-FileList mit allen Dateien aus dem ausgewählten Verzeichnis und seinen Unterverzeichnissen. Jede Datei hat eine webkitRelativePath-Eigenschaft, die den Pfad relativ zum ausgewählten Verzeichnis angibt (zum Beispiel images/logo.png). Das standardisierte directory-Attribut bietet dieselbe Funktionalität in modernen Browsern.

Kurze Antwort

Verwenden Sie input type=file mit dem webkitdirectory-Attribut, um Benutzern die Auswahl ganzer Ordner zum Hochladen zu ermöglichen. Jede Datei im ausgewählten Verzeichnis legt eine webkitRelativePath-Eigenschaft offen, die ihren Pfad relativ zum gewählten Ordner anzeigt. Unterstützt in Chrome 30+, Edge 12+, Safari 11.1+ und Firefox 50+. Das generierte HTML enthält eine Drag-and-Drop-Zone, Dateiliste mit Verzeichnisbaumansicht und Unterstützung für Einzeldatei-, Mehrfachdatei- und Verzeichnismodi.

Last updated: 2026-06-01

Einschränkungen

webkitRelativePath ist nur für Dateien verfügbar, die über eine Verzeichnisauswahl ausgewählt wurden - per Drag-and-Drop vom Betriebssystem hinzugefügte Dateien haben in Firefox und Safari keine Pfadinformationen, obwohl Chrome und Edge Drag-and-Drop von Verzeichnissen unterstützen.
Die Browserunterstützung für Verzeichniseingaben ist stark in Chromium-basierten Browsern und Firefox, aber Safaris Implementierung hat historisch hinterhergehinkt. Das standardisierte directory-Attribut wird in Safari 17+ unterstützt, aber ältere Safari-Versionen benötigen das webkitdirectory-Präfix.
Große Verzeichnisauswahlen (tausende Dateien) können den Browser-Tab einfrieren, während die Dateiliste befüllt und angezeigt wird. Verwenden Sie Lazy Rendering oder einen Web Worker für Produktionsbereitstellungen mit großen Verzeichnissen.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

So nutzt du dieses Tool

Wählen Sie den Upload-Modus: Einzeldatei (eine Datei auf einmal), Mehrere Dateien (mehrere Dateien auswählen) oder Verzeichnis (einen gesamten Ordner auswählen).
Konfigurieren Sie die Drag-and-Drop-Zone: aktivieren oder deaktivieren Sie Drag-and-Drop-Unterstützung, passen Sie den Drop-Zonen-Text und das aktive Zustands-Styling (Rahmenfarbe, Hintergrund oder Overlay) an.
Passen Sie die Dateilisten-Anzeige an: zeigen Sie Dateinamen, Größen, Typen und den webkitRelativePath für Verzeichnis-Uploads an. Wechseln Sie zwischen einer flachen Liste und einer Baumansicht, die die Verzeichnisstruktur erhält.
Kopieren Sie das generierte HTML mit eingebettetem CSS und JavaScript. Die Ausgabe enthält ein vollständiges, in sich geschlossenes Datei-Upload-Interface mit Ereignisbehandlung für das change-Event und Drag-and-Drop-Ereignisse.

Wofür du es nutzen kannst

Erstellen Sie eine Upload-Oberfläche für eine Dokumentationsseite, die ganze Ordner mit Bildern oder Markdown-Dateien akzeptiert und dabei die Verzeichnisstruktur beibehält.
Erstellen Sie ein Bulk-Datei-Upload-Tool für ein CMS, bei dem Redakteure einen Asset-Ordner per Drag-and-Drop ablegen und die relativen Pfade für URL-Zuordnung verwendet werden.
Entwickeln Sie ein Migrationstool, das einen Ordner mit exportierten Inhalten akzeptiert und webkitRelativePath verwendet, um die ursprüngliche Verzeichnishierarchie auf dem Server zu rekonstruieren.

Anwendungsfalle

Praxisbeispiele

Beispiel

Dokumentations-Bild-Uploader

Eine Dokumentationsseite muss Uploads ganzer Bildordner akzeptieren. Benutzer ziehen das Verzeichnis assets/images auf die Drop-Zone. Die Eingabe listet alle Dateien mit ihren relativen Pfaden auf - hero/header.jpg, icons/search.svg und screenshots/dashboard.png. Beim Upload rekonstruiert der Server die Verzeichnisstruktur und ordnet die Pfade den entsprechenden Dokumentationsseiten-URLs zu.

Beispiel

E-Mail-Vorlagen-Asset-Sammler

Ein E-Mail-Designer muss alle Assets für eine Kampagne in einem einzigen Upload sammeln. Er wählt den Kampagnenordner über die Verzeichnisauswahl. Die Oberfläche zeigt eine Baumstruktur von Dateien, organisiert nach Unterverzeichnissen - images/headers/, images/icons/ und images/logos/. Jede Datei zeigt ihre Größe und ihren Typ zusammen mit dem webkitRelativePath für die serverseitige Verarbeitung.

Haufige Fehler

webkitdirectory zu verwenden, ohne die Browserunterstützung zu prüfen - es funktioniert in Chrome, Edge, Safari und Firefox, aber nicht in allen Browsern. Stellen Sie immer einen Fallback zu regulären Datei-Inputs bereit und erkennen Sie die Unterstützung mit 'webkitdirectory' in document.createElement('input') vor dem Anzeigen der Verzeichnisauswahl.
Anzunehmen, dass webkitRelativePath für alle Dateien verfügbar ist - nur über eine Verzeichnisauswahl ausgewählte Dateien haben webkitRelativePath. Dateien, die per Drag-and-Drop von außerhalb des Browsers hinzugefügt werden (wie vom Desktop), haben diese Eigenschaft nicht, es sei denn, sie wurden auch über eine Verzeichniseingabe ausgewählt.
Den Fall nicht zu behandeln, dass das Verzeichnis tausende Dateien enthält - Browser können die Anzahl der von der Verzeichnisauswahl zurückgegebenen Dateien begrenzen, und die UI kann träge werden, wenn Sie versuchen, alle Dateien auf einmal zu rendern. Paginieren oder virtualisieren Sie die Dateiliste für große Verzeichnisse.

Überprüfung

Öffnen Sie das generierte HTML in Chrome. Klicken Sie auf die Verzeichnisauswahl und wählen Sie einen Ordner mit Unterverzeichnissen und Dateien aus. Überprüfen Sie, dass die Dateiliste alle Dateien mit korrekten webkitRelativePath-Werten anzeigt (z.B. subfolder/filename.ext) und dass Dateigrößen und -typen korrekt angezeigt werden.
Testen Sie die Drag-and-Drop-Zone, indem Sie einen Ordner aus dem Datei-Explorer auf den Ablagebereich ziehen. Überprüfen Sie in Chrome und Edge, dass der Ordnerinhalt mit den korrekten relativen Pfaden erscheint. In Firefox und Safari prüfen Sie, dass eine hilfreiche Meldung erscheint, die Benutzer zur Verwendung der Verzeichnisauswahl-Schaltfläche auffordert.

FAQ

Fragen zu Directory Upload Input Generator

Was ist der Unterschied zwischen webkitdirectory und dem standard directory-Attribut?

webkitdirectory war die ursprüngliche prefixierte Implementierung aus WebKit-Browsern (Chrome, Safari). Das standard directory-Attribut bietet dieselbe Funktionalität und wird in Chrome 116+, Edge 116+, Safari 17.0+ und Firefox 50+ unterstützt. Beide legen webkitRelativePath auf File-Objekten offen. Verwenden Sie das standard directory-Attribut für moderne Browser und webkitdirectory als Fallback für ältere Chromium-Versionen.

Kann ich Drag-and-Drop mit Verzeichnis-Upload verwenden?

Ja, aber mit Einschränkungen. Drag-and-Drop von Ordnern aus dem Betriebssystem-Dateimanager funktioniert in Chrome und Edge. Firefox und Safari unterstützen das Ziehen von Ordnern in eine Drop-Zone nicht. Der generierte Code behandelt beide Fälle: er zeigt die Verzeichnisauswahl als Fallback an, wenn Drag-and-Drop für Ordner nicht verfügbar ist. Für einzelne Dateien funktioniert Drag-and-Drop in allen modernen Browsern.

Wie funktioniert webkitRelativePath mit verschachtelten Verzeichnissen?

webkitRelativePath liefert den vollständigen Pfad vom ausgewählten Verzeichnis zur Datei, mit Schrägstrichen als Trennzeichen. Zum Beispiel ergibt die Auswahl eines Verzeichnisses namens assets, das images/logo.png enthält, für jede Datei einen webkitRelativePath von images/logo.png. Der Pfad verwendet immer Schrägstriche, unabhängig vom Betriebssystem. Sie können diesen Pfad verwenden, um die Verzeichnisstruktur auf dem Server zu rekonstruieren.

Wie viele Dateien kann eine Verzeichniseingabe verarbeiten?

Es gibt keine offizielle Grenze in der Spezifikation, aber Browser setzen praktische Grenzen. Chrome begrenzt die Verzeichnisauswahl auf etwa 10.000 Dateien in einer einzigen Auswahl. Für größere Datensätze sollten Sie Dateien in Batches hochladen oder einen Web Worker zur Verarbeitung der Dateiliste verwenden, ohne die UI zu blockieren.

Verwandte Tools