如何在浏览器中用JavaScript读取项目文件夹内的文本文件？

由于浏览器的安全限制，无法像Node.js那样直接通过文件路径读取本地文件，FileReader也仅能处理用户主动选择的上传文件，无法读取指定路径的文件。对于托管在GitHub Pages的静态站点，正确的做法是通过Fetch API发起HTTP请求获取同项目下的文件内容——GitHub Pages会将你的项目文件作为静态资源对外提供访问。

实现代码 #

方式一：使用.then链式调用 #

function LoadProjectCards() {
  // 发起请求，路径需与test.txt的实际位置匹配
  fetch('test.txt')
    .then(response => {
      if (!response.ok) {
        throw new Error(`请求失败：${response.status}`);
      }
      return response.text(); // 将响应内容转为字符串
    })
    .then(fileText => {
      // 在此处处理文件内容，比如填充HTML模板
      console.log(fileText);
      // 示例：将内容插入页面容器
      // document.getElementById('template-box').innerHTML = fileText;
    })
    .catch(err => {
      console.error('读取文件出错：', err);
    });
}

// 调用函数执行读取操作
LoadProjectCards();

方式二：使用async/await（更简洁的异步写法） #

async function LoadProjectCards() {
  try {
    const response = await fetch('test.txt');
    if (!response.ok) {
      throw new Error(`请求失败：${response.status}`);
    }
    const fileText = await response.text();
    // 处理文件内容
    console.log(fileText);
    // document.getElementById('template-box').innerHTML = fileText;
  } catch (err) {
    console.error('读取文件出错：', err);
  }
}

LoadProjectCards();

关键注意事项 #

• 路径正确性：如果test.txt在子目录中（比如assets/test.txt），需将请求路径改为对应相对路径。
• 异步逻辑：Fetch是异步操作，必须在请求完成后的回调或await之后处理文件内容，不能像之前那样在异步操作外部直接读取变量。
• 跨域问题：同项目内的文件不存在跨域限制，可直接发起请求。

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