Obtener la lista de nombres de archivos en la carpeta con Javascript

Mi sitio web muestra muchas imágenes de la /assets/photos/carpeta. ¿Cómo puedo obtener una lista de los archivos en esa carpeta con Javascript?

El código actual dará una lista de todos los archivos en una carpeta, asumiendo que está en el lado del servidor donde desea listar todos los archivos:

var fs = require('fs');
var files = fs.readdirSync('/assets/photos/');

No, Javascript no tiene acceso al sistema de archivos. Javascript del lado del servidor es una historia completamente diferente, pero supongo que no lo dices en serio.

Escribo un archivo dir.php

var files = <?php $out = array();
foreach (glob('file/*.html') as $filename) {
    $p = pathinfo($filename);
    $out[] = $p['filename'];
}
echo json_encode($out); ?>;

En su secuencia de comandos agregue:

<script src='dir.php'></script>

y usa la matriz de archivos []

Para los archivos del lado del cliente, no puede obtener una lista de archivos en el directorio local de un usuario.

Si el usuario ha proporcionado archivos cargados, puede acceder a ellos a través de su inputelemento.

<input type="file" name="client-file" id="get-files" multiple />


<script>
var inp = document.getElementById("get-files");
// Access and handle the files 

for (i = 0; i < inp.files.length; i++) {
    let file = inp.files[i];
    // do things with file
}
</script>

Para obtener la lista de nombres de archivo en una carpeta específica, puede usar:

fs.readdir(directory_path, callback_function)

Esto devolverá una lista que puede analizar mediante una simple indexación de listas como file[0],file[1], etc.

Hice una ruta diferente para cada archivo en un directorio en particular. Por lo tanto, ir a esa ruta significaba abrir ese archivo.

function getroutes(list){
list.forEach(function(element) {
  app.get("/"+ element,  function(req, res) {
    res.sendFile(__dirname + "/public/extracted/" + element);
  });
});

Llamé a esta función pasando la lista de nombre de archivo en el directorio __dirname/public/extractedy creó una ruta diferente para cada nombre de archivo que pude representar en el lado del servidor.

Utilizo el siguiente (código simplificado) en Firefox 69.0 (en Ubuntu) para leer un directorio y mostrar la imagen como parte de un marco de fotos digital. La página está hecha en HTML, CSS y JavaScript, y está ubicada en la misma máquina donde ejecuto el navegador. Las imágenes también se encuentran en la misma máquina, por lo que no se pueden ver desde "afuera".

var directory = <path>;
var xmlHttp = new XMLHttpRequest();
xmlHttp.open('GET', directory, false); // false for synchronous request
xmlHttp.send(null);
var ret = xmlHttp.responseText;
var fileList = ret.split('\n');
for (i = 0; i < fileList.length; i++) {
    var fileinfo = fileList[i].split(' ');
    if (fileinfo[0] == '201:') {
        document.write(fileinfo[1] + "<br>");
        document.write('<img src=\"' + directory + fileinfo[1] + '\"/>');
    }
}

Esto requiere que la política security.fileuri.strict_origin_policyesté deshabilitada. Esto significa que puede que no sea una solución que desee utilizar. En mi caso lo consideré bien.

Cree un archivo php llamado 'files.php' con el siguiente contenido:

<?php 
$out = array();
foreach (glob('/assets/photos/*') as $filename) {
    $p = pathinfo($filename);
    $out[] = $p['basename'];
}
echo json_encode($out); 
?>

luego llámalo con jQuery:

$.getJSON('files.php').then(function (response) {
     console.log(response);
});