JavaScript中如何读取本地文件_FileReader对象

狼影 2025-12-05 00:00:00 次阅读

JavaScript读取本地文件需通过FileReader异步处理用户选择的文件，无法直接访问任意本地路径；常用readAsText（文本）、readAsDataURL（base64）、readAsArrayBuffer（二进制）等方法，并支持onprogress监听进度。

JavaScript 中读取本地文件主要依靠 FileReader 对象，它允许异步读取用户通过 `` 选择的文件内容。注意：出于安全限制，JS 无法直接读取任意本地路径的文件（比如 C:\xxx.txt），只能处理用户主动选择的文件对象。

获取文件对象

通常从 `` 元素中获取：

使用 FileReader 读取文本文件

适用于 .txt、.json、.csv 等纯文本格式：

function readTextFile(file) {
  const reader = new FileReader();
reader.onload = function(e) {
console.log('文件内容：', e.target.result); // 字符串形式
};
reader.onerror = function() {
console.error('读取失败：', reader.error);
};
reader.readAsText(file, 'UTF-8'); // 指定编码，避免中文乱码
}

读取为其他格式

根据需求选择对应方法：

readAsDataURL(file)：转为 base64 字符串，适合预览图片或上传前处理
readAsArrayBuffer(file)：读为二进制缓冲区，适合处理音频、视频、Excel 等需底层操作的文件
readAsBinaryString(file)（已废弃，不推荐）：旧 API，兼容性差，应避免使用

监听读取进度（可选）

对大文件可显示加载状态：

reader.onprogress = function(e) {
  if (e.lengthComputable) {
    const percent = (e.loaded / e.total * 100).toFixed(1);
    console.log(`加载中... ${percent}%`);
  }
};

基本上就这些。关键点是：必须由用户触发选择文件，不能绕过交互自动读取；读取是异步的，结果在 onload 回调里获取；编码和格式选对，才能正确解析内容。