Liste der Dateinamen im Ordner mit Javascript abrufen

Meine Website liefert viele Bilder aus dem /assets/photos/Ordner. Wie kann ich mit Javascript eine Liste der Dateien in diesem Ordner erhalten?

Der aktuelle Code enthält eine Liste aller Dateien in einem Ordner, vorausgesetzt, Sie möchten auf der Serverseite alle Dateien auflisten:

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

Nein, Javascript hat keinen Zugriff auf das Dateisystem. Serverseitiges Javascript ist eine ganz andere Geschichte, aber ich denke, das meinst du nicht so.

Ich schreibe eine Datei dir.php

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

Fügen Sie in Ihrem Skript Folgendes hinzu:

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

und verwenden Sie das Array files []

Bei clientseitigen Dateien können Sie keine Liste der Dateien im lokalen Verzeichnis eines Benutzers abrufen.

Wenn der Benutzer hochgeladene Dateien bereitgestellt hat, können Sie über sein inputElement darauf zugreifen .

<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>

Um die Liste der Dateinamen in einem bestimmten Ordner abzurufen, können Sie Folgendes verwenden:

fs.readdir(directory_path, callback_function)

Dies gibt eine Liste zurück, die Sie durch einfache Listenindizierung wie file[0],file[1]usw. analysieren können .

Ich habe für jede Datei in einem bestimmten Verzeichnis eine andere Route erstellt. Zu diesem Pfad zu gehen bedeutete daher, diese Datei zu öffnen.

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

Ich habe diese Funktion aufgerufen und die Liste der Dateinamen im Verzeichnis übergeben. __dirname/public/extractedFür jeden Dateinamen, den ich auf der Serverseite rendern konnte, wurde eine andere Route erstellt.

Ich verwende den folgenden (abgespeckten Code) in Firefox 69.0 (unter Ubuntu), um ein Verzeichnis zu lesen und das Bild als Teil eines digitalen Fotorahmens anzuzeigen. Die Seite wurde in HTML, CSS und JavaScript erstellt und befindet sich auf demselben Computer, auf dem ich den Browser ausführe. Die Bilder befinden sich ebenfalls auf demselben Computer, sodass keine Anzeige von "außen" erfolgt.

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] + '\"/>');
    }
}

Dazu muss die Richtlinie security.fileuri.strict_origin_policydeaktiviert sein. Dies bedeutet, dass es möglicherweise keine Lösung ist, die Sie verwenden möchten. In meinem Fall hielt ich es für ok.

Erstellen Sie eine PHP-Datei mit dem Namen 'files.php' mit folgendem Inhalt:

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

Rufen Sie es dann mit jQuery auf:

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