Herramientas HTML

Gratis Generador de input de carga de directorio

Genere inputs HTML con webkitdirectory para carga de carpetas, zona de arrastrar y soltar y lista de archivos con webkitRelativePath.

Cargando herramienta...

Qué es Generador de input de carga de directorio?

El atributo webkitdirectory en un elemento input type=file permite a los usuarios seleccionar una carpeta completa en lugar de archivos individuales. Cuando se selecciona una carpeta, el navegador popula el FileList del input con todos los archivos del directorio seleccionado y sus subdirectorios. Cada archivo tiene una propiedad webkitRelativePath que proporciona la ruta relativa al directorio seleccionado (por ejemplo, images/logo.png). El atributo estandarizado directory proporciona la misma funcionalidad en navegadores modernos.

Respuesta rápida

Use input type=file con el atributo webkitdirectory para permitir a los usuarios seleccionar carpetas enteras para subir. Cada archivo en el directorio seleccionado expone una propiedad webkitRelativePath que muestra su ruta relativa a la carpeta elegida. Compatible con Chrome 30+, Edge 12+, Safari 11.1+ y Firefox 50+. El HTML generado incluye una zona de arrastrar y soltar, visualización de lista de archivos con vista de árbol de directorios y soporte para modos de archivo único, múltiples archivos y directorio.

Last updated: 2026-06-01

Limitaciones

webkitRelativePath solo está disponible para archivos seleccionados mediante un selector de directorio: los archivos añadidos mediante arrastrar y soltar desde el sistema operativo no tienen información de ruta en Firefox y Safari, aunque Chrome y Edge soportan arrastrar y soltar directorios.
El soporte del navegador para input de directorio es sólido en navegadores basados en Chromium y Firefox, pero la implementación de Safari ha ido históricamente por detrás. El atributo estándar directory es compatible con Safari 17+ pero las versiones antiguas de Safari requieren el prefijo webkitdirectory.
Las selecciones de directorio grandes (miles de archivos) pueden congelar la pestaña del navegador mientras se popula y muestra la lista de archivos. Use renderizado diferido o un Web Worker para implementaciones de producción que manejen directorios grandes.

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

Cómo usar esta herramienta

Elija el modo de subida: archivo único (un archivo a la vez), múltiples archivos (seleccionar varios archivos) o directorio (seleccionar una carpeta completa).
Configure la zona de arrastrar y soltar: active o desactive el soporte de arrastrar y soltar, personalice el texto de la zona y el estilo de estado activo (color de borde, fondo o superposición).
Personalice la visualización de la lista de archivos: muestre nombres de archivo, tamaños, tipos y webkitRelativePath para subidas de directorio. Alterne entre una lista plana y una vista de árbol que preserve la estructura de directorios.
Copie el HTML generado con CSS y JavaScript integrados. La salida incluye una interfaz de subida de archivos completa e independiente con manejo de eventos para el evento change y eventos de arrastrar y soltar.

Para qué puedes usarla

Construir una interfaz de subida para un sitio de documentación que acepte carpetas enteras de imágenes o archivos markdown preservando la estructura de directorios.
Crear una herramienta de subida masiva de archivos para un CMS donde los editores arrastran y sueltan una carpeta de activos y las rutas relativas se usan para el mapeo de URLs.
Diseñar una herramienta de migración que acepte una carpeta de contenido exportado y use webkitRelativePath para reconstruir la jerarquía de directorios original en el servidor.

Casos de uso

Ejemplos prácticos

Ejemplo

Cargador de imágenes de documentación

Un sitio de documentación necesita aceptar subidas de carpetas de imágenes completas. Los usuarios arrastran el directorio assets/images a la zona de soltar. El input lista todos los archivos con sus rutas relativas: hero/header.jpg, icons/search.svg y screenshots/dashboard.png. Al subir, el servidor reconstruye la estructura de directorios y mapea las rutas a las URLs de página de documentación correspondientes.

Ejemplo

Recolector de activos para plantillas de correo

Un diseñador de correos electrónicos necesita recopilar todos los activos para una campaña en una sola subida. Seleccionan la carpeta de la campaña usando el selector de directorio. La interfaz muestra un árbol de archivos organizados por subdirectorio: images/headers/, images/icons/ e images/logos/. Cada archivo muestra su tamaño y tipo junto con su webkitRelativePath para procesamiento del lado del servidor.

Errores comunes

Usar webkitdirectory sin verificar la compatibilidad del navegador: funciona en Chrome, Edge, Safari y Firefox, pero no en todos los navegadores. Proporcione siempre un respaldo a inputs de archivo regulares y detecte el soporte usando webkitdirectory en document.createElement('input') antes de mostrar el selector de directorio.
Asumir que webkitRelativePath está disponible para todos los archivos: solo los archivos seleccionados mediante un selector de directorio tienen webkitRelativePath. Los archivos añadidos mediante arrastrar y soltar desde fuera del navegador (como arrastrar desde el escritorio) no tienen esta propiedad a menos que también se hayan seleccionado a través de un input de directorio.
No manejar el caso donde el directorio contiene miles de archivos: los navegadores pueden limitar el número de archivos devueltos por el selector de directorio, y la interfaz puede volverse lenta si intenta renderizar todos los archivos a la vez. Pagine o virtualice la lista de archivos para directorios grandes.

Verificación

Abra el HTML generado en Chrome. Haga clic en el selector de directorio y seleccione una carpeta que contenga subdirectorios con archivos. Verifique que la lista de archivos muestre todos los archivos con sus valores correctos de webkitRelativePath (por ejemplo, subcarpeta/archivo.ext) y que los tamaños y tipos de archivo se muestren correctamente.
Pruebe la zona de arrastrar y soltar arrastrando una carpeta desde el explorador de archivos al área de soltar. En Chrome y Edge, verifique que los contenidos de la carpeta aparezcan con las rutas relativas correctas. En Firefox y Safari, verifique que aparezca un mensaje útil dirigiendo a los usuarios a usar el botón selector de directorio.

FAQ

Preguntas sobre Generador de input de carga de directorio

¿Cuál es la diferencia entre webkitdirectory y el atributo estándar directory?

webkitdirectory fue la implementación original con prefijo de los navegadores WebKit (Chrome, Safari). El atributo estándar directory proporciona la misma funcionalidad y es compatible con Chrome 116+, Edge 116+, Safari 17.0+ y Firefox 50+. Ambos exponen webkitRelativePath en los objetos File. Use el atributo estándar directory para navegadores modernos y webkitdirectory como respaldo para versiones antiguas de Chromium.

¿Puedo usar arrastrar y soltar con subida de directorios?

Sí, pero con limitaciones. Arrastrar y soltar carpetas desde el administrador de archivos del sistema operativo funciona en Chrome y Edge. Firefox y Safari no soportan arrastrar carpetas a una zona de soltar. El código generado maneja ambos casos: muestra el selector de directorio como respaldo cuando arrastrar y soltar no está disponible para carpetas. Para archivos individuales, arrastrar y soltar funciona en todos los navegadores modernos.

¿Cómo funciona webkitRelativePath con directorios anidados?

webkitRelativePath proporciona la ruta completa desde el directorio seleccionado hasta el archivo, usando barras diagonales como separadores. Por ejemplo, seleccionar un directorio llamado assets que contiene images/logo.png da a cada archivo un webkitRelativePath de images/logo.png. La ruta siempre usa barras diagonales independientemente del sistema operativo. Puede usar esta ruta para reconstruir la estructura de directorios en el servidor.

¿Cuántos archivos puede manejar un input de directorio?

No hay un límite oficial definido en la especificación, pero los navegadores imponen límites prácticos. Chrome limita la selección de directorio a aproximadamente 10,000 archivos en un solo selector de directorio. Para conjuntos de datos más grandes, considere subir archivos en lotes o usar un Web Worker para procesar la lista de archivos sin bloquear la interfaz. La visualización de la lista de archivos en el código generado incluye un contador de archivos y tamaño total para ayudar a los usuarios a entender el alcance de su selección.

Herramientas relacionadas