如何用HTML/JavaScript显示目录文件夹列表？是否需Node.js？

核心结论 #

纯前端HTML/JavaScript无法直接读取本地文件夹列表，因为浏览器的安全策略（同源限制+本地文件访问限制）禁止前端脚本直接访问本地文件系统。

你不需要必须使用Node.js，但需要借助后端服务或本地脚本生成可被前端读取的静态数据；浏览器环境下JS也不能直接调用本地批处理，仅桌面应用框架（如Electron）支持这类操作。

方案1：用Node.js搭建简单后端（常规推荐） #

这是最灵活的方案，能实时获取文件夹列表，后续也方便扩展搜索过滤功能。

步骤1：编写后端服务（server.js） #

const express = require('express');
const fs = require('fs');
const path = require('path');
const app = express();
const PORT = 3000;

// 托管前端静态文件
app.use(express.static('public'));

// 接口：获取目标目录下的文件夹列表
app.get('/get-folders', (req, res) => {
  // 替换为你的实际文件夹路径
  const targetDir = path.join(__dirname, 'Main Folder');
  fs.readdir(targetDir, { withFileTypes: true }, (err, files) => {
    if (err) return res.status(500).json({ error: '读取目录失败' });
    // 过滤出文件夹并提取名称
    const folders = files.filter(file => file.isDirectory()).map(file => file.name);
    res.json(folders);
  });
});

app.listen(PORT, () => {
  console.log(`服务器运行在 http://localhost:${PORT}`);
});

步骤2：编写前端页面（public/index.html） #

<!DOCTYPE html>
<html>
<head>
  <title>用户文件夹列表</title>
</head>
<body>
  <h1>用户文件夹列表</h1>
  <ul id="folderList"></ul>

  <script>
    // 调用后端接口加载文件夹列表
    fetch('/get-folders')
      .then(res => res.json())
      .then(folders => {
        const listEl = document.getElementById('folderList');
        folders.forEach(folder => {
          const li = document.createElement('li');
          li.textContent = folder;
          listEl.appendChild(li);
        });
      })
      .catch(err => console.error('加载失败:', err));
  </script>
</body>
</html>

运行方式 #

1. 安装Node.js后，执行npm init -y初始化项目，再安装依赖：npm install express
2. 运行node server.js，打开浏览器访问http://localhost:3000即可看到列表

方案2：不用Node.js，用批处理生成静态数据 #

适合不想搭建后端的场景，需手动运行批处理生成文件夹列表的静态文件，前端再读取该文件。

步骤1：编写批处理脚本（generate-folders.bat） #

@echo off
:: 替换为你的目标文件夹路径
set "targetDir=Main Folder"
set "outputFile=folders.json"

:: 生成JSON格式的文件夹列表
echo [ > %outputFile%
set first=true
for /d %%d in ("%targetDir%\*") do (
  if not !first!==true echo , >> %outputFile%
  echo  "%%~nd" >> %outputFile%
  set first=false
)
echo ] >> %outputFile%
echo 文件夹列表已生成到 %outputFile%

步骤2：编写前端页面（index.html） #

<!DOCTYPE html>
<html>
<head>
  <title>用户文件夹列表</title>
</head>
<body>
  <h1>用户文件夹列表</h1>
  <ul id="folderList"></ul>

  <script>
    // 读取批处理生成的JSON文件
    fetch('folders.json')
      .then(res => res.json())
      .then(folders => {
        const listEl = document.getElementById('folderList');
        folders.forEach(folder => {
          const li = document.createElement('li');
          li.textContent = folder;
          listEl.appendChild(li);
        });
      })
      .catch(err => console.error('加载失败:', err));
  </script>
</body>
</html>

运行方式 #

1. 双击运行generate-folders.bat，生成folders.json
2. 直接用浏览器打开index.html即可看到列表（部分浏览器可能需要允许本地文件访问）

关于JavaScript调用批处理的说明 #

• 浏览器环境下：JS无法直接调用本地批处理，这是浏览器的安全限制，防止恶意脚本操作本地系统。
• 桌面应用场景：如果用Electron等桌面框架开发，可借助Node.js的child_process模块调用批处理，示例代码：

const { exec } = require('child_process');
exec('generate-folders.bat', (err, stdout, stderr) => {
  if (err) {
    console.error('执行批处理失败:', err);
    return;
  }
  console.log('批处理输出:', stdout);
});

内容的提问来源于stack exchange，提问作者NateUser