如何用纯JavaScript和HTML5读取用户指定文件夹文件并本地处理

好问题！我来帮你梳理下纯前端就能实现的方案，完全不需要依赖特定浏览器扩展，也不用把文件数据传到服务器：

1. File System Access API（推荐，现代浏览器支持） #

这个API是W3C的标准，现在Chrome、Edge、Firefox都已经支持，不算Chrome专属了。它的核心优势是可以让用户授权浏览器持久访问某个本地文件夹，下次打开页面时无需重新选择，完全匹配你的需求：

• 核心流程：
  • 用户第一次访问时，调用showDirectoryPicker()让用户选择目标文件夹，获取文件夹句柄
  • 把这个句柄通过结构化克隆（structuredClone）序列化后，存在用户本地的localStorage或IndexedDB里（服务器只需要记录该用户已经完成过文件夹授权，不需要存句柄本身）
  • 下次用户打开页面时，直接从本地存储恢复句柄，就能遍历文件夹里的所有文件，用FileReader读取内容后在前端处理、绘制图表
• 代码示例：

// 保存文件夹访问权到本地存储
async function setupFolderAccess() {
  try {
    const folderHandle = await window.showDirectoryPicker();
    // 序列化句柄并存入localStorage
    const serializedHandle = JSON.stringify(await structuredClone(folderHandle));
    localStorage.setItem('userFolderHandle', serializedHandle);
    // 通知服务器用户已完成文件夹选择（仅做标记用，可选）
    await fetch('/mark-folder-setup', { method: 'POST', body: JSON.stringify({ userId: 'xxx' }) });
    // 立即开始处理文件
    await processFolderFiles(folderHandle);
  } catch (err) {
    console.error('文件夹选择失败:', err);
  }
}

// 恢复文件夹访问权并处理文件
async function restoreFolderAccess() {
  const serializedHandle = localStorage.getItem('userFolderHandle');
  if (!serializedHandle) {
    alert('请先选择你的目标文件夹');
    return;
  }
  try {
    const folderHandle = await structuredClone(JSON.parse(serializedHandle));
    await processFolderFiles(folderHandle);
  } catch (err) {
    // 如果权限过期，重新让用户选择
    localStorage.removeItem('userFolderHandle');
    setupFolderAccess();
  }
}

// 遍历并处理文件夹内的文件
async function processFolderFiles(folderHandle) {
  for await (const entry of folderHandle.values()) {
    if (entry.kind === 'file') {
      const file = await entry.getFile();
      // 根据文件类型读取内容（这里以文本为例，也支持ArrayBuffer处理二进制）
      const content = await file.text();
      // 你的数据处理逻辑：解析关联关系、生成图表等
      console.log(`处理文件: ${file.name}`);
      // 示例：用前端图表库绘制图表（无需上传数据）
      // renderRelationshipChart(analyzeData(content));
    }
  }
}

• 兼容性：Chrome 86+、Edge 86+、Firefox 111+，现在主流浏览器都已支持，基本不用顾虑“特定浏览器”的问题。

2. webkitdirectory 属性（兼容更老浏览器） #

如果需要覆盖一些较老的浏览器（比如旧版Safari、Chrome），可以用input[type="file"]的webkitdirectory属性（现在多数浏览器已经支持不带前缀的directory属性）：

• 核心流程：
  • 用<input type="file" directory multiple>让用户选择文件夹，浏览器会返回文件夹内所有文件的File对象
  • 提取文件夹的相对名称（比如通过file.webkitRelativePath），把这个名称传到服务器保存
  • 下次用户访问时，提示用户重新选择同一个文件夹，通过对比相对路径确认是目标文件夹，然后处理文件
• 代码示例：

<input type="file" id="folderPicker" directory multiple>
<script>
const folderPicker = document.getElementById('folderPicker');

folderPicker.addEventListener('change', async (e) => {
  const files = Array.from(e.target.files);
  if (!files.length) return;
  
  // 提取文件夹名称（从第一个文件的相对路径中获取）
  const folderName = files[0].webkitRelativePath.split('/')[0];
  // 把文件夹名称传到服务器保存
  await fetch('/save-folder-name', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ userId: 'xxx', folderName })
  });
  
  // 处理所有文件
  for (const file of files) {
    const content = await file.text();
    // 数据处理逻辑
    console.log(`处理文件: ${file.name}`);
  }
});
</script>

• 优缺点：兼容性更好，但无法自动恢复文件夹访问权，每次需要用户手动选择；服务器仅保存文件夹名称作为提示，不涉及任何文件内容。

• 所有文件处理逻辑都在前端JavaScript中完成，完全不会上传任何文件内容到服务器，符合你的隐私需求
• 服务器只需要保存用户ID与文件夹选择状态（或文件夹名称），无需存储任何文件数据
• 如果用户清除浏览器缓存，File System Access API的持久化句柄会丢失，需要重新授权，这是浏览器的安全限制，无法绕过

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