如何使用JavaScript列出本地文件夹文件？跨平台实现方案咨询

浏览器的安全沙箱机制禁止网页未经用户主动授权，直接扫描、访问本地文件系统的任意内容，这是所有主流浏览器的通用安全规则，和你使用Windows、macOS还是Linux系统没有关系，你之前找不到无门槛的实现方案，本质是这个安全限制拦住了无授权的文件访问行为。

• 第一优先级：File System Access API 原生方案
  这是目前W3C标准化的官方方案，兼容Chrome/Edge 86+、Safari 15.2+、Firefox 111+，覆盖95%以上的桌面端活跃用户，全操作系统兼容。
  实现逻辑非常直接：
  1. 提供一个触发按钮，用户点击后调用showDirectoryPicker()唤起系统目录选择弹窗，用户主动选择存放文本文件的目标文件夹、完成授权后，脚本即可拿到该目录的操作句柄
  2. 遍历目录句柄筛选出所有.txt格式的文本文件，将文件名渲染为可点击的列表项
  3. 用户点击对应文件名时，调用文件句柄的getFile()方法即可读取文件内容，直接在页面展示
     最小可运行代码示例：

  // 绑定目录选择按钮事件
  document.getElementById('pick-dir-btn').addEventListener('click', async () => {
    // 唤起目录选择弹窗，等待用户授权
    const dirHandle = await window.showDirectoryPicker();
    const txtFiles = [];
    // 遍历目录下所有条目
    for await (const entry of dirHandle.values()) {
      // 仅保留txt格式的文件
      if (entry.kind === 'file' && entry.name.toLowerCase().endsWith('.txt')) {
        txtFiles.push(entry);
      }
    }
    // 此处自行实现txtFiles的列表渲染逻辑，点击单文件时调用以下方法读取内容
    const readTxtContent = async (fileHandle) => {
      const file = await fileHandle.getFile();
      const content = await file.text();
      // 拿到content后即可在页面做展示逻辑
      return content;
    }
  });
  

  注意：这个API仅支持HTTPS环境、本地localhost调试环境调用，普通HTTP公网页面无法唤起权限申请。
• 第二优先级：传统file input兼容方案
  如果需要适配版本更老的浏览器，可以使用带webkitdirectory属性的文件选择标签实现，用户选择目标文件夹后，会一次性返回该目录下所有符合格式要求的文件对象，你可以直接渲染列表、用FileReader读取内容。
  这个方案的缺点是页面刷新后授权不会保留，用户每次打开页面都需要重新选择目录，体验比原生File System Access API差。
  示例代码：

  <!-- 目录选择控件 -->
  <input type="file" id="dir-picker" webkitdirectory multiple accept=".txt">
  <script>
    document.getElementById('dir-picker').addEventListener('change', (e) => {
      const txtFiles = Array.from(e.target.files);
      // 直接渲染txtFiles为列表即可，读取单文件内容逻辑如下
      const readTxtContent = (file) => {
        const reader = new FileReader();
        reader.onload = (ev) => {
          const content = ev.target.result;
          // 拿到内容做展示
        }
        reader.readAsText(file);
      }
    })
  </script>
  

• 第三优先级：桌面端包装方案
  如果你需要跳过用户手动选目录的步骤，默认读取固定路径下的文件列表，纯Web技术无法实现（依然是安全限制），可以用Electron把你的Web页面包装成本地桌面应用，此时可以直接调用Node.js的fs模块遍历、读取本地任意路径的文件，没有浏览器沙箱限制，同样可以兼容所有主流桌面操作系统。

不要尝试寻找“无授权直接读取本地文件列表”的脚本方案，这类方案要么利用了已被修复的浏览器漏洞，要么需要用户提前修改浏览器安全配置，完全不具备通用性，不可能在普通用户的浏览器上正常运行。

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