Wat is Directory Upload Input Generator?
Het webkitdirectory-attribuut op een input type=file-element laat gebruikers een volledige map selecteren in plaats van individuele bestanden. Elk bestand heeft een webkitRelativePath-eigenschap die het pad relatief aan de geselecteerde map biedt (bijvoorbeeld images/logo.png). Het gestandaardiseerde directory-attribuut biedt dezelfde functionaliteit in moderne browsers.
Snel antwoord
Gebruik input type=file met het webkitdirectory-attribuut om gebruikers volledige mappen te laten selecteren voor upload. Elk bestand toont een webkitRelativePath. Ondersteund in Chrome 30+, Edge 12+, Safari 11.1+ en Firefox 50+.
Last updated: 2026-06-01
Beperkingen
- webkitRelativePath is alleen beschikbaar voor bestanden geselecteerd via een mappenkiezer, niet via drag-and-drop in Firefox en Safari.
- Browserondersteuning is sterk in Chromium en Firefox, maar Safari-ondersteuning is historisch achtergebleven.
- Grote mapselecties kunnen het browsertabblad laten vastlopen; gebruik lazy rendering of een Web Worker voor productie-implementaties.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Zo gebruik je deze tool
- Kies de uploadmodus: enkel bestand, meerdere bestanden of map.
- Configureer de drag-and-drop-zone met aanpasbare styling.
- Pas de bestandslijstweergave aan met bestandsnamen, groottes en relatieve paden.
- Kopieer de gegenereerde HTML met ingebedde CSS en JavaScript voor een complete uploadinterface.
Waarvoor je het kunt gebruiken
- Bouw een uploadinterface voor een documentatiesite die volledige mappen met bestanden accepteert met behoud van de mapstructuur.
- Maak een bulk-bestandsuploadtool voor een CMS waar editors een map met assets slepen en de relatieve paden worden gebruikt voor URL-mapping.
- Ontwerp een migratietool die een map met geexporteerde content accepteert en webkitRelativePath gebruikt om de directoryhiërarchie te reconstrueren.