js 如何读取文件内容-js教程-PHP中文网

浏览器中javascript无法直接访问本地文件系统，必须通过用户主动选择文件的方式，结合<input type="file">和filereader api来读取文件内容，确保安全性；2. 读取文本文件时使用reader.readastext()，读取图片等二进制文件可使用reader.readasdataurl()或reader.readasarraybuffer()；3. 在node.js环境中，可通过fs.readfile()或fs.createreadstream()直接读取文件，其中读取大文件推荐使用流式处理以避免内存溢出；4. 处理大文件时需注意避免使用同步方法、合理设置highwatermark、处理背压、监听错误事件并及时释放资源；5. javascript可处理多种文件类型，浏览器端通过filereader获取arraybuffer或data url进行解析，node.js则通过buffer对象操作二进制数据，支持图片、音频、视频、zip等多种格式的读取与处理。

js 如何读取文件内容

JavaScript在浏览器环境里，本身是无法直接、随意地去触碰本地文件系统的。这是出于安全考量，试想一下，如果一个网页脚本能随意读取你电脑里的文件，那隐私和安全简直就是灾难。所以，我们通常是通过一些特定的“入口”或者在Node.js这样的服务器端环境才能实现文件内容的读取。核心来说，浏览器端依赖用户的主动操作（比如选择文件），而Node.js则拥有直接操作文件系统的能力。

解决方案

在浏览器端，最常见的、也是最安全的方式，就是通过HTML的

<input type="file">

登录后复制

元素结合

FileReader

登录后复制

API。用户点击这个文件选择框，主动选择一个或多个文件后，JavaScript才能拿到这些文件的引用，并进一步读取其内容。

浏览器端（用户交互式读取本地文件）：

这基本上是我们日常开发中最常遇到的场景。

<input type="file" id="fileInput" accept=".txt,.json">
<pre id="fileContent"></pre>

<script>
  document.getElementById('fileInput').addEventListener('change', function(event) {
    const file = event.target.files[0]; // 获取用户选择的第一个文件

    if (file) {
      const reader = new FileReader();

      // 当文件读取完成时触发
      reader.onload = function(e) {
        document.getElementById('fileContent').textContent = e.target.result;
        console.log('文件内容已读取:', e.target.result);
      };

      // 读取过程中发生错误
      reader.onerror = function(e) {
        console.error('文件读取失败:', e.target.error);
        document.getElementById('fileContent').textContent = '文件读取失败。';
      };

      // 根据文件类型选择不同的读取方式，这里以文本为例
      // reader.readAsText(file, 'UTF-8'); // 读取为文本，可指定编码
      // reader.readAsDataURL(file); // 读取为Data URL (Base64编码)，常用于图片预览
      // reader.readAsArrayBuffer(file); // 读取为ArrayBuffer，用于处理二进制数据

      // 假设我们读取的是文本文件
      reader.readAsText(file);
    } else {
      document.getElementById('fileContent').textContent = '未选择文件。';
    }
  });
</script>

登录后复制

这段代码的核心逻辑是：用户选择文件 -> 浏览器提供一个

File

登录后复制

对象 -> 我们用

FileReader

登录后复制

去“消化”这个

File

登录后复制

对象，把它变成我们能处理的文本、数据URL或二进制数据。这种方式的安全性在于，所有操作都必须由用户发起，脚本无法在用户不知情的情况下扫描本地文件。

浏览器端（读取服务器上的文件）：

如果文件已经存放在服务器上，那情况就简单多了，我们把它当成一个普通的网络资源来请求。

// 使用Fetch API
fetch('https://example.com/path/to/your/remote-file.txt')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.text(); // 或者 .json(), .blob(), .arrayBuffer()
  })
  .then(data => {
    console.log('远程文件内容:', data);
    // 将内容展示在页面上
    // document.getElementById('remoteFileContent').textContent = data;
  })
  .catch(error => {
    console.error('读取远程文件失败:', error);
  });

// 或者使用XMLHttpRequest (老旧但兼容性好)
/*
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/path/to/your/remote-file.txt', true);
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log('远程文件内容 (XHR):', xhr.responseText);
  } else {
    console.error('读取远程文件失败 (XHR):', xhr.statusText);
  }
};
xhr.onerror = function() {
  console.error('网络错误或CORS问题。');
};
xhr.send();
*/

登录后复制

这里要注意跨域（CORS）问题，如果你的前端页面和文件所在的服务器不在同一个域，服务器需要设置相应的CORS头，否则浏览器会阻止请求。这是网络安全的基本原则。

Node.js环境：

在Node.js里，文件操作是其核心能力之一，它提供了强大的

fs

登录后复制

（File System）模块。

const fs = require('fs');
const path = require('path');

const filePath = path.join(__dirname, 'my-local-file.txt'); // 假设文件在当前脚本同目录下

// 异步读取文件 (推荐，不会阻塞主线程)
fs.readFile(filePath, 'utf8', (err, data) => {
  if (err) {
    console.error('异步读取文件失败:', err);
    // 实际应用中，这里可能需要更复杂的错误处理，比如重试或通知用户
    return;
  }
  console.log('异步读取到的文件内容:', data);
});

// 同步读取文件 (会阻塞主线程，不推荐用于大型文件或高并发场景)
try {
  const data = fs.readFileSync(filePath, 'utf8');
  console.log('同步读取到的文件内容:', data);
} catch (err) {
  console.error('同步读取文件失败:', err);
}

登录后复制

在Node.js中，你可以直接指定文件的路径进行读取，而无需用户交互。这使得它非常适合后端服务、命令行工具等场景。

浏览器端如何安全地让用户选择本地文件并读取其内容？

当我们谈到浏览器端读取本地文件，最核心的考量就是“安全”二字。JavaScript在浏览器沙箱里，是不能像Node.js那样直接访问文件系统的。所有对本地文件的读取，都必须是用户主动触发的。这个“主动触发”就是安全性的基石。

我们主要依赖

FileReader

登录后复制

API来完成这项任务。它的工作流程是这样的：首先，你需要一个

<input type="file">

登录后复制

元素。当用户点击它，并从弹出的文件选择器中选中一个或多个文件后，浏览器会生成一个

FileList

登录后复制

对象，里面包含了用户选择的

File

登录后复制

对象。这个

File

登录后复制

对象不是文件的真实路径，而是一个抽象的、包含了文件元数据（如文件名、大小、MIME类型、最后修改日期）的引用。

接着，我们创建一个

FileReader

登录后复制

实例。这个

FileReader

登录后复制

就像一个翻译官，它能把浏览器给我们的

File

登录后复制

对象“翻译”成JavaScript能直接操作的数据格式。它提供了几种关键的读取方法：

```
readAsText(file, [encoding])
```
登录后复制
: 这是最常用的，将文件内容读取为纯文本字符串。你可以指定编码（比如
```
UTF-8
```
登录后复制
），否则它会尝试自动检测。对于
```
.txt
```
登录后复制
,
```
.json
```
登录后复制
,
```
.csv
```
登录后复制
,
```
.xml
```
登录后复制
等文本文件，这是首选。
```
readAsDataURL(file)
```
登录后复制
: 将文件内容读取为Data URL（Base64编码的字符串）。这对于图片、小图标等非常有用，你可以直接把这个Data URL赋值给
```
<img>
```
登录后复制
标签的
```
src
```
登录后复制
属性，或者作为CSS背景图片，而无需上传到服务器。
```
readAsArrayBuffer(file)
```
登录后复制
: 将文件内容读取为ArrayBuffer。ArrayBuffer是一个通用的固定长度的二进制数据缓冲区，它本身不能直接操作，但可以创建视图（如
```
Uint8Array
```
登录后复制
,
```
DataView
```
登录后复制
等）来处理二进制数据。这对于处理图片、音频、视频等二进制文件，或者需要进行更底层数据操作的场景（比如文件加密、解密、压缩）非常关键。

读取过程是异步的，所以我们需要监听

FileReader

登录后复制

的事件：

```
onload
```
登录后复制
: 当文件成功读取完成时触发。读取结果会存储在
```
reader.result
```
登录后复制
中。
```
onerror
```
登录后复制
: 当读取过程中发生错误时触发。
```
reader.error
```
登录后复制
会包含错误信息。
```
onprogress
```
登录后复制
: 在读取大文件时，可以用来显示进度条。

在实践中，为了增强用户体验和安全性，我们还会做一些额外的处理：

文件类型限制: 在
```
<input type="file">
```
登录后复制
上使用
```
accept
```
登录后复制
属性，例如
```
accept=".png,.jpg,.jpeg"
```
登录后复制
，可以引导用户选择正确的文件类型。虽然这不是严格的验证（用户仍然可以通过修改文件后缀来绕过），但能提供一个初步的过滤。
文件大小检查: 在
```
change
```
登录后复制
事件中，检查
```
file.size
```
登录后复制
属性，如果文件过大，可以提示用户或阻止读取，避免内存溢出或长时间等待。
错误处理:
```
onerror
```
登录后复制
事件是必须的。当文件损坏、权限问题或其他原因导致读取失败时，及时向用户反馈。
UI反馈: 在读取大文件时，可以显示加载动画或进度条，告知用户操作正在进行。

总的来说，

FileReader

登录后复制

API提供了一个强大且安全的机制，让JavaScript能够在浏览器端处理用户选择的本地文件，其核心在于“用户授权”这一环节，确保了操作的透明性和安全性。

在Node.js环境中，读取大文件时有哪些性能优化和注意事项？

在Node.js里，文件操作是家常便饭，但当面对大文件时，比如几个GB的日志文件、视频文件，直接用

fs.readFile()

登录后复制

一次性读入内存就显得很不合适了。因为这不仅会占用大量内存，还可能导致内存溢出，甚至阻塞Node.js的事件循环，让整个应用变得卡顿。

这时候，文件流（Streams）就成了我们的救星。Node.js的

fs

登录后复制

模块提供了

fs.createReadStream()

登录后复制

方法，它不会一次性将整个文件读入内存，而是以小块（chunks）的形式逐步读取。这就像用吸管喝水，而不是把整桶水倒进杯子里。

移动端无限滚动加载瀑布流

里面有2个文件夹。其中这个文件名是:finishing，是我项目还没有请求后台的数据的模拟写法。请求后台数据之后，瀑布流的js有一点点变化，放在文件名是：finished。变化在于需要穿参数到后台，和填充的内容都用后台的数据填充。看自己项目需求来。由于chrome模拟器是不允许读取本地文件json的，所以如果你要进行测试，在hbuilder打开项目就可以看到效果啦，或者是火狐浏览器。

查看详情

以下是使用文件流读取大文件的基本模式：

const fs = require('fs');
const path = require('path');

const largeFilePath = path.join(__dirname, 'large-log-file.txt'); // 假设这是一个大文件

const readStream = fs.createReadStream(largeFilePath, {
  encoding: 'utf8', // 指定编码
  highWaterMark: 64 * 1024 // 每次读取的缓冲区大小，默认为64KB
});

let totalData = ''; // 仅作示例，实际处理大文件时通常不累加到内存

readStream.on('data', (chunk) => {
  // 每当读取到一个数据块时触发
  // chunk 是一个 Buffer 对象，如果指定了encoding，则为字符串
  // console.log(`读取到 ${chunk.length} 字节的数据块`);
  // 在这里处理每个数据块，比如写入另一个文件，或者进行数据分析
  totalData += chunk; // 再次强调，实际处理大文件时避免这种累加方式
});

readStream.on('end', () => {
  // 文件读取完毕
  console.log('文件已全部读取完毕。');
  // console.log('所有数据 (不推荐用于大文件):', totalData.length);
});

readStream.on('error', (err) => {
  // 读取过程中发生错误
  console.error('读取文件流时发生错误:', err);
});

// 还可以监听 'close' 事件，表示文件描述符已关闭
readStream.on('close', () => {
  console.log('文件流已关闭。');
});

登录后复制

性能优化和注意事项：

避免
```
fs.readFileSync()
```
登录后复制
: 顾名思义，同步读取会阻塞Node.js的事件循环，直到整个文件读取完毕。对于任何生产环境或需要响应性的应用，都应尽量避免使用它来读取大文件。它只适用于启动时读取配置文件这种一次性的、小文件场景。
合理设置
```
highWaterMark
```
登录后复制
:
```
createReadStream
```
登录后复制
的
```
highWaterMark
```
登录后复制
选项决定了内部缓冲区的大小，即每次
```
'data'
```
登录后复制
事件发射的数据量。默认是64KB。如果你在处理非常大的文件或者网络传输，可能需要根据实际情况调整这个值，以平衡内存使用和I/O效率。太小会导致频繁的I/O操作，太大则可能占用过多内存。
处理背压（Backpressure）: 这是流处理中一个非常重要的概念。当数据生产者（读取流）生成数据的速度快于消费者（处理数据或写入另一个流）处理数据的速度时，就会出现背压。如果不处理，内存会不断堆积。在Node.js中，可写流（Writable Stream）会通过返回
```
false
```
登录后复制
来指示其缓冲区已满，此时读取流应该暂停（
```
readStream.pause()
```
登录后复制
），直到可写流的
```
'drain'
```
登录后复制
事件触发后再恢复（
```
readStream.resume()
```
登录后复制
）。这是一个更高级的话题，但在管道（
```
pipe()
```
登录后复制
）操作中，Node.js会自动处理背压。
```
// 示例：将大文件内容写入另一个文件，Node.js自动处理背压
const writeStream = fs.createWriteStream(path.join(__dirname, 'output.txt'));
readStream.pipe(writeStream); // 推荐方式，简单且自动处理背压

writeStream.on('finish', () => {
  console.log('文件已成功复制。');
});
writeStream.on('error', (err) => {
  console.error('写入文件流时发生错误:', err);
});
```
登录后复制
错误处理: 无论是读取流还是写入流，都必须监听
```
'error'
```
登录后复制
事件。文件I/O操作是不可靠的，可能因为文件不存在、权限问题、磁盘空间不足等原因失败。不处理错误会导致应用崩溃。
资源释放: 当不再需要文件流时，确保它被正确关闭。虽然通常情况下，流在
```
'end'
```
登录后复制
或
```
'error'
```
登录后复制
事件后会自动关闭，但在某些复杂场景下，你可能需要手动调用
```
readStream.destroy()
```
登录后复制
来释放文件描述符。
并行读取的考量: 如果需要同时读取多个大文件，要小心控制并发量。过多的并发文件读取可能会耗尽系统资源（如文件描述符），或者导致I/O瓶颈。

总而言之，处理Node.js中的大文件，核心思想就是“流式处理”，避免一次性加载，并通过事件驱动的方式逐步处理数据块，同时关注背压和完善的错误处理。

除了文本文件，JavaScript还能读取哪些类型的文件内容？它们如何被处理？

当然可以！JavaScript不只是能读文本，它对各种二进制文件也有很好的支持。这在前端领域尤其重要，比如图片预览、音频播放、视频处理，甚至是一些本地数据文件的解析。关键在于，当你读取非文本文件时，你通常不会直接得到一个可读的字符串，而是原始的二进制数据。

我们依然主要依赖

FileReader

登录后复制

API在浏览器端处理这些文件，以及Node.js的

fs

登录后复制

模块。

在浏览器端，通过

FileReader

登录后复制

处理二进制文件：

当你需要处理图片、音频、视频、PDF、ZIP等非文本文件时，

FileReader

登录后复制

的

readAsArrayBuffer()

登录后复制

和

readAsDataURL()

登录后复制

方法就派上用场了。

```
readAsDataURL(file)
```
登录后复制
：用于快速预览或嵌入小文件
- 用途: 最常用于图片预览。它会将文件内容编码成Base64字符串，并附带MIME类型前缀（例如
```
data:image/png;base64,...
```
  登录后复制
  ）。这个字符串可以直接赋值给
```
<img>
```
  登录后复制
  标签的
```
src
```
  登录后复制
  属性，或者作为CSS的
```
background-image
```
  登录后复制
  。
- 处理方式:
```
// 假设 file 是一个图片 File 对象
const reader = new FileReader();
reader.onload = function(e) {
  const img = document.createElement('img');
  img.src = e.target.result; // 直接赋值Data URL
  document.body.appendChild(img);
  console.log('图片Data URL:', e.target.result.substring(0, 50) + '...'); // 截取一部分看
};
reader.readAsDataURL(file);
```
  登录后复制
- 优点: 简单直接，无需服务器交互就能在客户端展示。
- 缺点: Base64编码会使数据量增大约33%，不适合大文件，会消耗更多内存。

readAsArrayBuffer(file)

登录后复制

：用于底层二进制数据操作

用途: 当你需要对文件内容进行更深度的处理时，比如解析特定格式（如Excel、ZIP）、进行加密解密、或者上传到服务器时，
```
ArrayBuffer
```
登录后复制
是你的选择。它提供的是文件的原始二进制字节流。

处理方式:

reader.result

登录后复制

会是一个

ArrayBuffer

登录后复制

对象。

ArrayBuffer

登录后复制

本身是不可直接操作的，你需要创建“视图”来访问其内容，比如

Uint8Array

登录后复制

（8位无符号整数数组）、

DataView

登录后复制

等。

// 假设 file 是一个二进制文件（比如一个自定义的二进制数据文件）
const reader = new FileReader();
reader.onload = function(e) {
  const arrayBuffer = e.target.result; // 获取 ArrayBuffer
  const uint8Array = new Uint8Array(arrayBuffer); // 创建一个8位无符号整数视图

  console.log('文件字节长度:', uint8Array.length);
  console.log('前10个字节:', uint8Array.slice(0, 10));

  // 示例：如果你知道文件格式，可以进一步解析
  // 比如，解析一个简单的二进制文件头
  if (uint8Array[0] === 0x50 && uint8Array[1] === 0x4B) { // 检查是否是ZIP文件头 (P K)
    console.log('这可能是一个ZIP文件！');
  }

  // 如果是图片，可以结合 Blob 和 URL.createObjectURL() 来创建可用于 img.src 的URL
  const blob = new Blob([arrayBuffer], { type: file.type });
  const objectURL = URL.createObjectURL(blob);
  const img = document.createElement('img');
  img.src = objectURL;
  document.body.appendChild(img);
  // 使用完后记得释放URL，避免内存泄露
  // URL.revokeObjectURL(objectURL);
};
reader.readAsArrayBuffer(file);

登录后复制

优点: 提供最原始的数据，灵活性最高，适合复杂的数据处理。
缺点: 处理起来相对复杂，需要对二进制数据结构有一定了解。

在Node.js中处理二进制文件：

Node.js的

fs

登录后复制

模块在读取文件时，默认情况下如果

encoding

登录后复制

参数不指定，或者指定为

null

登录后复制

，就会返回

Buffer

登录后复制

对象，这正是处理二进制数据的基础。

const fs = require('fs');
const path = require('path');

const binaryFilePath = path.join(__dirname, 'sample.jpg'); // 假设这是一个图片文件

// 异步读取二进制文件
fs.readFile(binaryFilePath, (err, data) => { // 不指定编码，data就是Buffer
  if (err) {
    console.error('读取二进制文件失败:', err);
    return;
  }
  console.log('二进制文件大小:', data.length, '字节');
  console.log('前10个字节 (Buffer):', data.slice(0, 10));

  // 你可以把这个Buffer写入另一个文件，或者进行进一步处理
  // fs.writeFile(path.join(__dirname, 'copy.jpg'), data, (err) => { ... });

  // 如果需要转换为Base64字符串 (常用于嵌入HTML或发送给API)
  const base64String = data.toString('base64');
  console.log('Base64编码 (前50字符):', base64String.substring(0, 50) + '...');
});

// 使用流处理大二进制文件
const readStream = fs.createReadStream(binaryFilePath);
readStream.on('data', (chunk) => {
  // chunk 也是 Buffer 对象
  // console.log(`读取到二进制数据块，长度: ${chunk.length}`);
  // 在这里可以对每个二进制数据块进行处理，比如计算哈希值，或者转码
});
readStream.on('end', () => {
  console.log('二进制文件流读取完毕。');
});
readStream.on('error', (err) => {

登录后复制

以上就是js 如何读取文件内容的详细内容，更多请关注php中文网其它相关文章！