我的网站提供大量来自/assets/photos/ 文件夹的图片。如何使用 Javascript 获取该文件夹中的文件列表？
【问题讨论】：
标签： javascript
当前代码将给出一个文件夹中所有文件的列表，假设它在服务器端你要列出所有文件：
var fs = require('fs');
var files = fs.readdirSync('/assets/photos/');
【讨论】：
不，Javascript 无权访问文件系统。 Server side 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[] 数组
【讨论】：
*.* 或使用scandir 来保留文件扩展名，$out = scandir("."); echo json_encode($out);
对于客户端文件，您无法获取用户本地目录中的文件列表。
如果用户提供了上传的文件，您可以通过他们的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 中的文件名列表，它为我能够在服务器端呈现的每个文件名创建了不同的路由。
【讨论】：
如果你使用nginx，你可以设置autoindex on，然后你请求url，你可以从response中获取文件名。
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "/assets/photos/", true);
xhttp.send();
}
function myFunction(xml) {
// console.log(xml.responseText)
var parser = new DOMParser();
var htmlDoc = parser.parseFromString(xml.responseText, 'text/html');
var preList = htmlDoc.getElementsByTagName("pre")[0].getElementsByTagName("a")
for (i = 1; i < preList.length; i++) {
console.log(preList[i].innerHTML)
}
}
</script>
【讨论】：
我在 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。这意味着它可能不是您想要使用的解决方案。就我而言，我认为没问题。
【讨论】：
将 JSONP 应用于 IfTheElse 答案：
在 /dir.php 中写入以下内容：
<?php
$out = array();
foreach (glob('file/*.html') as $filename) {
$p = pathinfo($filename);
$out[] = $p['filename'];
}
echo 'callback(' . json_encode($out) . ')';
?>
在你的 index.html 中添加这个脚本：
<script>
/* this function will be fired when there are files
in dir search in php' glob
*/
function callback(files) {
alert(files);
}
/* call inside document.ready to make sure the
callback is already loaded
*/
$(document).ready(function() {
let php = document.createElement("script");
php.setAttribute("src", "/dir.php");
document.body.appendChild(php);
});
</script>
【讨论】：