当前位置：首页 > JavaScript

js实现文件读取

2026-04-07 10:10:19JavaScript

使用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) => {
    console.log(e.target.result);
  };

  reader.readAsText(file);
});

读取不同类型文件的方法

FileReader提供多种读取方式，根据需求选择合适方法：

readAsText()：读取为文本
readAsDataURL()：读取为Base64数据URL
readAsArrayBuffer()：读取为二进制缓冲区
readAsBinaryString()：读取为原始二进制字符串

处理大文件的分片读取

对于大文件可采用分块读取策略：

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) => {
    // 处理当前分块数据
    offset += chunkSize;
    if (offset < file.size) {
      readChunk(file);
    }
  };

  reader.readAsArrayBuffer(chunk);
}

Node.js环境下的文件读取

在Node.js中使用fs模块：

const fs = require('fs');

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

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

错误处理与进度监控

完善的实现需要包含错误处理和进度反馈：

js实现文件读取

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

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