如何使用JavaScript查看页面File System并查询特定文件是否存在？

核心方案：File System Access API #

现代浏览器提供的File System Access API允许网页在用户授权的前提下，访问本地文件系统，包括查询特定文件是否存在。注意该API受浏览器安全限制，必须由用户主动授权，目前主要支持Chrome、Edge等Chromium内核浏览器（Firefox需手动开启实验性特性）。

实现步骤 #

1. 触发用户交互，请求授权访问目标目录
2. 在授权目录下尝试获取目标文件的句柄：成功则文件存在，抛出NotFoundError则文件不存在

代码示例 #

async function checkTargetFile() {
  try {
    // 让用户选择要查询的目录
    const directoryHandle = await window.showDirectoryPicker();
    
    try {
      // 尝试获取目标文件句柄，{ create: false } 表示不创建新文件
      const fileHandle = await directoryHandle.getFileHandle("你要查的文件名.txt", { create: false });
      console.log("文件存在");
      // 如需读取文件内容，可执行：const file = await fileHandle.getFile();
    } catch (e) {
      if (e.name === "NotFoundError") {
        console.log("文件不存在");
      } else {
        console.error("查询出错：", e);
      }
    }
  } catch (e) {
    console.error("用户未授权或访问失败：", e);
  }
}

// 必须绑定到用户交互事件（比如按钮点击），否则浏览器会拦截
document.querySelector("#check-file-btn").addEventListener("click", checkTargetFile);

关键注意事项 #

• 必须通过用户主动操作触发（比如点击按钮），直接在页面加载时调用会被浏览器安全机制阻止
• 只能访问用户授权的目录，无法随意读取本地文件系统的任意位置
• 兼容性：Chrome 86+、Edge 86+原生支持；Firefox需在about:config中开启dom.fs.enabled和dom.fs.dirPicker.enabled

替代方案：传统File API（仅用户主动选择文件场景） #

如果不需要主动查询本地文件，仅需在用户选择文件后判断是否为目标文件，可使用传统File API：

document.querySelector("#file-select").addEventListener("change", (e) => {
  const selectedFile = e.target.files[0];
  if (selectedFile && selectedFile.name === "目标文件名.txt") {
    console.log("选中的文件就是目标文件");
  } else {
    console.log("未选中目标文件");
  }
});

该方案无法主动查询本地文件，仅能依赖用户手动选择文件后做判断。

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