当前位置：首页 > JavaScript

js实现文件读取

2026-02-02 16:28:42JavaScript

使用FileReader API读取文件内容

FileReader是浏览器提供的API，可用于异步读取文件内容。以下示例展示如何读取文本文件内容：

const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  const reader = new FileReader();

  reader.onload = (e) => {
    const content = e.target.result;
    console.log(content);
  };

  reader.readAsText(file);
});

读取不同类型文件的方法

FileReader提供多种读取方式，适用于不同场景：

reader.readAsText(file) - 读取为文本字符串 reader.readAsDataURL(file) - 读取为Base64数据URL reader.readAsArrayBuffer(file) - 读取为ArrayBuffer对象 reader.readAsBinaryString(file) - 读取为二进制字符串

处理大文件的分片读取

对于大文件，可采用分片读取方式避免内存问题：

const chunkSize = 1024 * 1024; // 1MB分片
let offset = 0;

function readChunk(file) {
  const chunk = file.slice(offset, offset + chunkSize);
  const reader = new FileReader();

  reader.onload = (e) => {
    // 处理当前分片数据
    processChunk(e.target.result);

    offset += chunkSize;
    if(offset < file.size) {
      readChunk(file);
    }
  };

  reader.readAsArrayBuffer(chunk);
}

使用Blob对象处理文件

Blob接口可直接操作文件数据：

const blob = new Blob(['Hello, world!'], {type: 'text/plain'});
const url = URL.createObjectURL(blob);

// 创建下载链接
const a = document.createElement('a');
a.href = url;
a.download = 'example.txt';
a.click();

Node.js环境下的文件读取

在Node.js中可使用fs模块同步或异步读取文件：

const fs = require('fs');

// 异步读取
fs.readFile('file.txt', 'utf8', (err, data) => {
  if(err) throw err;
  console.log(data);
});

// 同步读取
const data = fs.readFileSync('file.txt', 'utf8');

错误处理与进度监控

完善的实现应包含错误处理和进度监控：

reader.onerror = () => {
  console.error('文件读取错误:', reader.error);
};

reader.onprogress = (event) => {
  if(event.lengthComputable) {
    const percent = (event.loaded / event.total) * 100;
    console.log(`读取进度: ${Math.round(percent)}%`);
  }
};

js实现文件读取