HoRain云--JavaScript快速读取TXT文件全攻略

这篇文章介绍了在JavaScript中读取TXT文件的几种方法，分为浏览器端和Node.js环境两种场景。在浏览器端，可以通过input标签让用户选择本地文件并读取，或者使用fetch获取远程服务器上的TXT文件。在Node.js环境下，则可以使用内置的fs模块进行文件读取操作。文章为每种方法提供了示例代码，并分析了各自的优缺点。最后总结了不同场景下的推荐方法，帮助开发者根据实际需求选择最适合的文

云夏之末

1725人浏览 · 2025-10-11 11:00:00

云夏之末 · 2025-10-11 11:00:00 发布

🎬 HoRain云小助手：个人主页

🔥 个人专栏: 《Linux 系列教程》《c语言教程》

⛺️生活的理想，就是为了理想的生活!

⛳️ 推荐

前些天发现了一个超棒的服务器购买网站，性价比超高，大内存超划算！忍不住分享一下给大家。点击跳转到网站。

专栏介绍

专栏名称	专栏介绍
《C语言》	本专栏主要撰写C干货内容和编程技巧，让大家从底层了解C，把更多的知识由抽象到简单通俗易懂。
《网络协议》	本专栏主要是注重从底层来给大家一步步剖析网络协议的奥秘，一起解密网络协议在运行中协议的基本运行机制！
《docker容器精解篇》	全面深入解析 docker 容器，从基础到进阶，涵盖原理、操作、实践案例，助您精通 docker。
《linux系列》	本专栏主要撰写Linux干货内容，从基础到进阶，知识由抽象到简单通俗易懂，帮你从新手小白到扫地僧。
《python 系列》	本专栏着重撰写Python相关的干货内容与编程技巧，助力大家从底层去认识Python，将更多复杂的知识由抽象转化为简单易懂的内容。
《试题库》	本专栏主要是发布一些考试和练习题库（涵盖软考、HCIE、HRCE、CCNA等）

⛳️ 推荐

专栏介绍

一、在浏览器端读取本地或远程 TXT 文件

方法1：通过让用户选择并读取本地 TXT 文件（推荐，无需服务器）

示例代码：

方法2：通过 fetch 读取远程 TXT 文件（比如放在服务器上的 txt）

示例代码：

二、在 Node.js 环境下读取 TXT 文件

示例代码（异步，推荐）：

或者使用同步方式（不推荐在服务端主线程使用）：

总结

在JavaScript中，快速读取TXT文件通常可以通过以下几种方式实现，具体取决于你的运行环境（浏览器端还是Node.js服务端）。

一、在浏览器端读取本地或远程 TXT 文件

方法1：通过 `<input type="file">`让用户选择并读取本地 TXT 文件（推荐，无需服务器）

这是最常见且安全的方式，用户主动选择文件后，用 JavaScript 读取其内容。

示例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>读取TXT文件</title>
</head>
<body>
  <input type="file" id="fileInput" accept=".txt" />
  <pre id="fileContent"></pre>

  <script>
    document.getElementById('fileInput').addEventListener('change', function(event) {
      const file = event.target.files[0];
      if (!file) return;

      const reader = new FileReader();
      reader.onload = function(e) {
        const content = e.target.result;
        document.getElementById('fileContent').textContent = content;
      };
      reader.onerror = function() {
        console.error("文件读取失败");
      };

      // 以文本形式读取文件
      reader.readAsText(file, 'UTF-8');
    });
  </script>
</body>
</html>

✅ 优点：

纯前端实现，无需服务器。
用户可控，安全性高。

❌ 限制：

只能读取用户主动选择的文件，不能直接访问任意路径的文件。

方法2：通过 fetch 读取远程 TXT 文件（比如放在服务器上的 txt）

如果你的 TXT 文件已经部署在 Web 服务器上，你可以使用 fetch快速获取其内容。

示例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>读取远程TXT</title>
</head>
<body>
  <button id="loadTxt">加载远程TXT</button>
  <pre id="fileContent"></pre>

  <script>
    document.getElementById('loadTxt').addEventListener('click', async () => {
      try {
        // 替换为你的 TXT 文件 URL，比如：https://example.com/sample.txt
        const response = await fetch('https://example.com/sample.txt');
        if (!response.ok) {
          throw new Error(`HTTP error: ${response.status}`);
        }
        const text = await response.text();
        document.getElementById('fileContent').textContent = text;
      } catch (error) {
        console.error('读取失败:', error);
      }
    });
  </script>
</body>
</html>

✅ 优点：

异步加载，适合网络资源。
代码简洁，使用现代 async/await。

❌ 限制：

需要 TXT 文件可通过 HTTP 访问（同源或配置了 CORS）。

二、在 Node.js 环境下读取 TXT 文件

如果你是在服务器端使用 Node.js，可以使用内置的 fs模块快速读取 TXT 文件。

示例代码（异步，推荐）：

const fs = require('fs').promises; // 使用 Promise 版本的 fs

async function readTxtFile(filePath) {
  try {
    const data = await fs.readFile(filePath, 'utf-8');
    console.log(data);
  } catch (err) {
    console.error('读取文件出错:', err);
  }
}

// 调用函数，传入你的 txt 文件路径，如 './sample.txt'
readTxtFile('./sample.txt');

或者使用同步方式（不推荐在服务端主线程使用）：

const fs = require('fs');

try {
  const data = fs.readFileSync('./sample.txt', 'utf-8');
  console.log(data);
} catch (err) {
  console.error('读取文件出错:', err);
}

✅ 优点：

读取速度快，适合服务端脚本处理。
支持同步和异步两种方式。

❌ 限制：

仅适用于 Node.js 环境，无法在浏览器中运行。

总结

场景	推荐方法	是否需要用户交互	是否需要服务器
浏览器读取用户本地文件	`<input type="file">`+ `FileReader`	✅ 是	❌ 否
浏览器读取远程 TXT	`fetch()`	❌ 否	✅ 是（需可访问的URL）
Node.js 读取本地 TXT	`fs.readFile()`/ `fs.promises`	❌ 否	❌ 否