如何使用 JavaScript 在本地读取 .txt 文件

2023-10-30 01:06:59

导读

在本地静态环境下，我们需要实现用 JavaScript 读取同目录下的 .txt 文件，将其中的内容应用到网页上。对于这个问题，有几个可行的方法，本文将一一介绍，希望能帮到您。

方法一：FileReader API

FileReader API 是一个浏览器内置的 API，允许您读取文件。您可以通过以下步骤使用 FileReader API 来读取 .txt 文件：

创建一个新的 FileReader 对象。
将要读取的文件拖放到 FileReader 对象中。
监听 FileReader 对象的 onload 事件。
在 onload 事件处理程序中，您可以使用 result 属性来获取文件的文本内容。

const fileReader = new FileReader();

fileReader.onload = function() {
  const text = fileReader.result;

  // 使用 `text` 变量来获取文件的内容。
};

fileReader.readAsText("path/to/file.txt");

方法二：fetch() 方法

fetch() 方法是一个浏览器内置的方法，允许您向服务器发送请求并获取响应。您可以通过以下步骤使用 fetch() 方法来读取 .txt 文件：

调用 fetch() 方法，传入要读取文件的路径。
在 fetch() 方法的第一个参数中，您可以使用 file: 协议来指定要读取的是一个本地文件。
在 fetch() 方法的第二个参数中，您可以指定请求的选项，例如请求方法、请求头等。

fetch("file:///path/to/file.txt")
  .then(response => {
    return response.text();
  })
  .then(text => {
    // 使用 `text` 变量来获取文件的内容。
  });

方法三：XMLHttpRequest

XMLHttpRequest 是一个浏览器内置的对象，允许您向服务器发送请求并获取响应。您可以通过以下步骤使用 XMLHttpRequest 来读取 .txt 文件：

创建一个新的 XMLHttpRequest 对象。
将要读取的文件路径指定给 XMLHttpRequest 对象的 open() 方法。
将 XMLHttpRequest 对象的 responseType 属性设置为 "text"。
调用 XMLHttpRequest 对象的 send() 方法。
在 XMLHttpRequest 对象的 onload 事件处理程序中，您可以使用 responseText 属性来获取文件的文本内容。

const xhr = new XMLHttpRequest();

xhr.open("GET", "file:///path/to/file.txt", true);
xhr.responseType = "text";

xhr.onload = function() {
  const text = xhr.responseText;

  // 使用 `text` 变量来获取文件的内容。
};

xhr.send();