本地HTML如何读取目录文件名生成Javascript数组

受浏览器安全沙箱限制，本地运行的纯前端HTML无法无交互直接访问你电脑上任意指定路径的文件夹，必须由用户主动触发选择、授权目标文件夹访问权限后，才能遍历读取内部文件信息，以下是两种可直接落地的实现方式：

• 方案1：File System Access API（现代浏览器推荐）
  适配Chrome/Edge 86+、Firefox 111+等新版本浏览器，支持记住授权状态，下次打开无需重复选择文件夹，可直接运行的示例代码：

  <!DOCTYPE html>
  <html>
  <body>
    <button id="pickDir">选择Videos文件夹</button>
    <script>
      let videoFileNames = []
      document.getElementById('pickDir').addEventListener('click', async () => {
        // 唤起系统文件夹选择弹窗
        const dirHandle = await window.showDirectoryPicker()
        videoFileNames = []
        // 遍历文件夹内所有条目
        for await (const entry of dirHandle.values()) {
          // 仅收集文件，跳过子文件夹
          if (entry.kind === 'file') {
            videoFileNames.push(entry.name)
          }
        }
        // 此时videoFileNames就是你需要的数组，示例场景下值为["VideoA.mp4", "VideoB.mp4"]
        console.log(videoFileNames)
      })
    </script>
  </body>
  </html>
  

  代码保存为本地HTML文件打开后，点击按钮选中你的Videos文件夹，即可在控制台拿到对应数组，数组索引顺序和系统文件夹内文件默认排序一致。

• 方案2：原生文件选择控件（兼容旧版浏览器）
  基于input[type=file]的文件夹选择能力实现，兼容几乎所有主流浏览器版本，示例代码：

  <!DOCTYPE html>
  <html>
  <body>
    <input type="file" id="dirInput" webkitdirectory directory multiple>
    <script>
      let videoFileNames = []
      document.getElementById('dirInput').addEventListener('change', (e) => {
        videoFileNames = []
        const fileList = e.target.files
        for (let file of fileList) {
          // 跳过子文件夹内的文件，仅保留根目录文件
          if (!file.webkitRelativePath.includes('/')) {
            videoFileNames.push(file.name)
          }
        }
        console.log(videoFileNames)
      })
    </script>
  </body>
  </html>
  

重要提示：所有纯前端方案都必须经过用户手动选择文件夹的授权步骤，这是浏览器强制的安全规则，不存在可绕过的方法。如果需要无交互自动读取固定路径的文件夹，属于本地脚本能力范畴，需要搭配Node.js等本地运行环境实现，纯浏览器端HTML无法做到。

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