如何用JavaScript读取指定文件夹内容并在HTML中自动生成列表？

好问题！直接用浏览器端的JavaScript不能直接读取本地文件夹内容——这是浏览器的核心安全限制，目的是防止网页未经用户许可就随意访问本地文件系统，保护用户隐私。不过有两种合法的方式能实现你想要的“自动列出文件夹内txt文件并生成列表”的需求：

一、浏览器端：需要用户主动选择文件夹 #

浏览器允许通过File API让用户手动选择文件夹，之后你就能读取该文件夹内的文件并生成列表。这里有个简单的实现示例：

代码实现 #

<!-- HTML部分 -->
<input type="file" id="folderPicker" webkitdirectory directory multiple>
<ul id="folder1"></ul>

<script>
// JavaScript部分
const folderPicker = document.getElementById('folderPicker');
const fileList = document.getElementById('folder1');

folderPicker.addEventListener('change', (e) => {
  // 清空现有列表
  fileList.innerHTML = '';
  // 获取用户选择的文件夹内的所有文件
  const files = Array.from(e.target.files);
  
  // 筛选出.txt文件并生成列表项
  files.filter(file => file.name.endsWith('.txt')).forEach(file => {
    const li = document.createElement('li');
    li.textContent = file.name;
    fileList.appendChild(li);
  });
});
</script>

这个方案的特点是：

• 必须由用户手动点击选择文件夹，网页无法自动访问本地文件夹
• 兼容性不错，主流浏览器（Chrome、Firefox、Edge等）都支持

二、Node.js环境：直接读取本地文件夹 #

如果你的需求是在本地运行的脚本（而非网页），比如构建工具、本地应用，那么可以用Node.js的fs模块直接读取文件夹内容：

代码实现 #

const fs = require('fs').promises;
const path = require('path');

async function generateTxtFileList(folderPath) {
  try {
    // 读取文件夹内的所有文件
    const files = await fs.readdir(folderPath);
    // 筛选.txt文件
    const txtFiles = files.filter(file => file.endsWith('.txt'));
    // 生成HTML列表字符串
    const htmlList = `<ul id="folder1">
      ${txtFiles.map(file => `<li>${file}</li>`).join('\n      ')}
    </ul>`;
    
    console.log(htmlList);
    // 也可以把结果写入HTML文件
    await fs.writeFile('fileList.html', htmlList);
  } catch (err) {
    console.error('读取文件夹出错:', err);
  }
}

// 调用函数，传入目标文件夹路径
generateTxtFileList('./your-folder-path');

这个方案适合本地自动化场景，不需要用户交互，但只能在Node.js环境下运行。

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