¿Hay alguna manera de que pueda usar HTML estático (y/o JavaScript) en el navegador para obtener todos los archivos y carpetas del proyecto actual? Por ejemplo, tengo la siguiente estructura:
./project ├── files-and-folders │ ├── 1.png │ ├── 2.png │ ├── 3.png │ └── inner-folder │ ├── 4.png │ └── 5.png ├── index.html └── index.js Me gustaría abrir index.html en un navegador, es decir, file:///path/to/project/index.html y obtener la lista de todos los archivos y carpetas en la carpeta files-and-folders .
Sé que puede usar fs con NodeJS y leer archivos y carpetas, pero me preguntaba si esto se puede lograr usando HTML estático o JavaScript.
La idea es que me gustaría obtener todos los archivos y carpetas de la carpeta de files-and-folders y mostrarlos dentro de mi archivo index.html como una lista.
Gracias.
TL; DR Esto no debería ser posible
Razones:
input ), por lo que no puede usar una solución de JavaScript puro para lograr lo que desea.Sus opciones:
Puede que no haya ninguna manera fácil de lograr su objetivo. Si solo desea mostrar el index.html (o lo que sea) localmente, que es como entendí su pregunta, podría pensar en usar el lenguaje de secuencias de comandos (no JavaScript-;)) de su preferencia como Perl o Python. Su secuencia de comandos podría verse así:
index.html según sea necesario.Luego, debe asegurarse de que se llame a su secuencia de comandos para mostrar el archivo HTML y que el archivo no se abra directamente, ya que de lo contrario podría estar desactualizado.
Actualización: ¿Por qué entonces funciona el uso de una URL como file://path/to/project en su navegador?
El navegador es una aplicación que se ejecuta en su PC local. Por lo tanto, tiene las posibilidades y permisos para acceder a su sistema de archivos local. Esto se hace utilizando los medios que ofrece el lenguaje de programación del navegador (como, por ejemplo, Rust) junto con su sistema operativo y, por lo tanto, no se limita a lo que ofrece JavaScript.
Puede abrir el file -URL que publicó en su navegador y ver el código fuente de la página que se muestra. Encontrará que los nombres del contenido del directorio se insertan por alguna "magia" que no ve. En Firefox, verá líneas como addRow("Documents and Settings" ... por ejemplo, si abre solo file:///C:/ (en Windows). Los Documents and Settings se originan en su navegador consultando su sistema operativo para el contenido de C:\ y creando una entrada addRow para todo lo encontrado.Esto es un poco similar a lo que escribí en "Tus opciones".
Puede usar un campo de entrada con tipo de archivo, esto requiere permiso del usuario y, que yo sepa, es la única forma de acceder a directorios y archivos desde el lado del cliente.
<input type ="file" webkitdirectory="">