Javascript 在前端HTML文件中显示fs.readdirSync（）的输出

我对

node.js非常陌生，一直在用谷歌搜索上面问题标题中所述问题的解决方案

基本上，我正在构建一个简单的web api，允许用户上传他们的文件，然后单独查询。因此，我试图找出如何在服务器目录中显示文件列表，这样他们就可以从列表中选择文件，而不是记住确切的文件名

这是我的完整html代码
project/public/index.html
（编辑——在Oorja回答之后）

javascript可以工作，因为我可以在控制台中看到文件列表，或者如果我转到
/list files
url，但是，我不知道如何将输出发送到前端-我不知道如何连接它们-因此当我单击
div class=“dropdown”下的
按钮时
它们将显示为一个列表
元素

请有人给我指出正确的方向，或者更好，给我举个例子

提前谢谢你

编辑
上述javascript的
文件
的输出
/列表文件
如下

[ '.DS_Store',
  'Screen Shot 2018-06-02 at 2.15.10 pm.png',
  'aaa.png',
  'bbb.png',
  'ccc.png',
  'ddd.png',
  'eee.png' ]

另外，为了澄清，我正在使用
Express
框架构建此web api。
您应该尝试类似的模板引擎

使用时的用法示例：

EJS默认使用根目录中的
视图
文件夹作为html文件，因此创建它并将
index.html
放在那里

0。安装EJS:
npm安装EJS

1.在express中包含EJS:
app.set（'view engine'，'EJS'）

2.添加到路由：
res.render（'index'，{files:files}）

3.在HTML中获取它，修改index.HTML（将它放在需要的地方）：



或如果需要将其作为JS变量，请使用：

<script> var files = <%- JSON.stringify(files) %>; </script>

var文件=；

您应该尝试像这样的模板引擎

使用时的用法示例：

EJS默认使用根目录中的
视图
文件夹作为html文件，因此创建它并将
index.html
放在那里

0。安装EJS:
npm安装EJS

1.在express中包含EJS:
app.set（'view engine'，'EJS'）

2.添加到路由：
res.render（'index'，{files:files}）

3.在HTML中获取它，修改index.HTML（将它放在需要的地方）：



或如果需要将其作为JS变量，请使用：

<script> var files = <%- JSON.stringify(files) %>; </script>

var文件=；

一旦您准备好了文件列表，就为其创建一个API端点。比如说，
/get files
。假设您将
express
用作node.js服务器，您可以这样做-

const express = require('express');
const fs = require('fs');

const app = express();
// Makes your upload_files directory public. Don't use this in a real app. 
// Create a separate route to serve file data. This is just for brevity of code.
app.use('/upload_files', express.static('./upload_files'))

app.get('/get-files', (req, res) => {
    // your logic of getting file names
    const files = fs.readdirSync('./upload_files');
    res.json(files);
});

app.listen(3000); // start a server at localhost:3000

现在，在前端，您可以打开一个XHR GET请求来获取node.js服务器上的文件名，如下所示-

function show_list() {
    var image_list= document.getElementById('image_list');
    // Assuming you have jQuery as well...
    $.getJSON('http://localhost:3000/get-files', function (data) {
        data.forEach(file => {
            // Do something with the file name 
            $(image_list).append($('<a href="http://localhost:3000/upload_files/' + file + '">' + file  + '</a>'));
        })
    });
}

函数show_list（）{
var image_list=document.getElementById（'image_list'）；
//假设您也有jQuery。。。
$.getJSON（'http://localhost:3000/get-文件、函数（数据）{
data.forEach（文件=>{
//对文件名做些什么
$（图像列表）。附加（$（''）；
})
});
}

您可以阅读有关Express的更多信息。
您还可以像Tamas一样使用服务器端模板。它会将数据与
HTML
文件一起发送，但我怀疑这是否是您要求的
 一旦您准备好了文件列表，就为其创建一个API端点。比如说，
/get files
。假设您将
express
用作node.js服务器，您可以这样做-

const express = require('express');
const fs = require('fs');

const app = express();
// Makes your upload_files directory public. Don't use this in a real app. 
// Create a separate route to serve file data. This is just for brevity of code.
app.use('/upload_files', express.static('./upload_files'))

app.get('/get-files', (req, res) => {
    // your logic of getting file names
    const files = fs.readdirSync('./upload_files');
    res.json(files);
});

app.listen(3000); // start a server at localhost:3000

现在，在前端，您可以打开一个XHR GET请求来获取node.js服务器上的文件名，如下所示-

function show_list() {
    var image_list= document.getElementById('image_list');
    // Assuming you have jQuery as well...
    $.getJSON('http://localhost:3000/get-files', function (data) {
        data.forEach(file => {
            // Do something with the file name 
            $(image_list).append($('<a href="http://localhost:3000/upload_files/' + file + '">' + file  + '</a>'));
        })
    });
}

函数show_list（）{
var image_list=document.getElementById（'image_list'）；
//假设您也有jQuery。。。
$.getJSON（'http://localhost:3000/get-文件、函数（数据）{
data.forEach（文件=>{
//对文件名做些什么
$（图像列表）。附加（$（''）；
})
});
}

您可以阅读有关Express的更多信息。
您还可以像Tamas一样使用服务器端模板。它会将数据与
HTML
文件一起发送，但我怀疑这是否是您要求的
 
文件
看起来怎么样like@brk刚刚对问题进行了修改。我只是想列出文件名或者，如果有一种简单的方式将它们显示为缩略图，那也太棒了！您需要的是服务器端模板引擎，例如把手。你可以用谷歌搜索它们。
文件
看起来怎么样like@brk刚刚对问题进行了修改。我只是想列出文件名或者，如果有一种简单的方式将它们显示为缩略图，那也太棒了！您需要的是服务器端模板引擎，例如把手。你可以用谷歌搜索它们。那么，你是说我的html
index.html
文件中这一行
所在的位置（根据我上面的问题）将被你的步骤3替换吗？是的，如果你需要，我猜你需要。那么，你是指我的html
index.html
文件中这一行
所在的位置（根据我上面的问题）将被你的步骤3替换吗？是的，如果您需要，我猜您需要。当我访问
http://localhost:3000/get-文件
但是，当我单击按钮时，它不会加载任何内容。我遗漏了什么？我已经用完整的
index.html
和
server.js
代码编辑了我的问题@OorjaI认为问题出在样式部分的
display:none
。另外，查看行->
app.use（'/upload_files'，express.static（'./upload_files'）。如果目录名已更改为
upload\u files
请在此处更新。此外，您还可以使用
expre