使用JavaScript获取文件夹中的文件名列表

我的网站提供了很多/assets/photos/文件夹中的图片。如何使用Javascript获取该文件夹中的文件列表？

当前代码将给出一个文件夹中所有文件的列表，假设它在服务器端您要列出所有文件：

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

不，Javascript无法访问文件系统。服务器端Javascript是一个完全不同的故事，但是我想你不是那个意思。

我写一个文件dir.php

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

在脚本中添加：

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

并使用files []数组

对于客户端文件，您无法在用户的本地目录中获得文件列表。

如果用户提供了上载的文件，则可以通过其input元素访问它们。

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

要获取指定文件夹中的文件名列表，可以使用：

fs.readdir(directory_path, callback_function)

这将返回一个列表，您可以通过简单的列表索引（例如）进行解析file[0],file[1]。

我为特定目录中的每个文件设置了不同的路由。因此，转到该路径意味着打开该文件。

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

我调用此函数来传递目录中的文件名列表，__dirname/public/extracted它为每个文件名创建了一条不同的路由，并能够在服务器端进行渲染。

我在Firefox 69.0（在Ubuntu上）中使用以下代码（分解后的代码）读取目录，并将图像显示为数码相框的一部分。该页面由HTML，CSS和JavaScript制成，位于运行浏览器的同一台计算机上。图像也位于同一台计算机上，因此从“外部”看不到任何图像。

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

这需要security.fileuri.strict_origin_policy禁用该策略。这意味着它可能不是您要使用的解决方案。就我而言，我认为还可以。

创建一个名为“ files.php”的php文件，其内容如下：

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

然后用jQuery调用它：

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