怎么在HTML中通过FileSystemDirectoryHandle的entries方法遍历目录内的文件列表-html教程-PHP中文网

filesystemdirectoryhandle.entries()需在https/localhost安全上下文中由用户手势触发，返回异步迭代器，必须用for await...of遍历，并配合querypermission/requestpermission检查读权限。

怎么在html中通过filesystemdirectoryhandle的entries方法遍历目录内的文件列表

FileSystemDirectoryHandle.entries() 不能直接在普通 HTML 页面中调用

这个方法只在支持 File System Access API 的安全上下文（https:// 或 localhost）中可用，且必须由用户手势（如点击）触发。直接在页面加载时执行 entries() 会抛出 SecurityError 或 NotAllowedError。

常见错误现象：Uncaught TypeError: directoryHandle.entries is not a function（旧版 Chrome 或未启用实验性功能）、NotAllowedError: Permission denied（没点按钮就调用）、SecurityError（HTTP 环境下运行）。

必须先通过 showDirectoryPicker() 获取 FileSystemDirectoryHandle
Chrome 86+ 默认启用，Firefox 和 Safari 尚未支持（截至 2024 年中）
调用前需检查 'navigator.storage' in window 和 'showDirectoryPicker' in window
不能用 for...of 直接遍历 entries() 返回的异步迭代器——它不是同步可迭代对象

正确遍历 entries() 返回的异步迭代器

entries() 返回的是一个 异步迭代器（AsyncIterator），必须用 for await...of 消费，不能用普通 for...of 或 Array.from()。

示例代码片段：

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

const dirHandle = await window.showDirectoryPicker();
for await (const [name, handle] of dirHandle.entries()) {
  console.log(name, handle.kind); // name 是字符串，handle 是 FileSystemFileHandle 或 FileSystemDirectoryHandle
}

handle.kind 是 "file" 或 "directory"，可用于区分类型
每次迭代是 Promise，所以整个循环必须在 async 函数内
不支持 break 后自动清理资源；若中途退出，后续条目不会被读取，但无内存泄漏风险
注意：某些大目录可能触发浏览器限流或中断，建议加 try/catch 包裹循环体

entries() 和 queryPermission()、requestPermission() 的配合使用

即使用户之前授过权，也不能假设 entries() 一定成功——权限可能被撤销或过期。应显式检查并请求持久化权限。

调用前先做 const status = await dirHandle.queryPermission({mode: 'read'});
若 status !== 'granted'，需再调用 await dirHandle.requestPermission({mode: 'read'})
返回 'granted' 才能安全调用 entries()；否则仍可能报 NotAllowedError
权限模式必须与操作匹配：entries() 只读，所以用 {mode: 'read'} 即可，不要误用 'readwrite'

entries() 遍历结果不含路径信息，需手动拼接

entries() 返回的每个 handle 不带路径，只有文件/目录名和类型。如果需要完整路径（比如用于后续 getFile() 或展示层级），得靠递归 + 名称拼接实现。

例如，要获取某个子文件的绝对路径字符串，不能依赖 handle 自身属性，而要这样构造：

async function getFullPath(handle, path = '') {
  if (handle.kind === 'file') return path;
  const subPath = path ? `${path}/${handle.name}` : handle.name;
  const results = [];
  for await (const [name, subHandle] of handle.entries()) {
    results.push(await getFullPath(subHandle, subPath));
  }
  return results;
}