JavaScript教程：深入理解File和FileReader对象

劳泉文Luna

于 2025-06-01 09:08:36 发布

阅读量236

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00070/article/details/148362054

JavaScript教程：深入理解File和FileReader对象

en.javascript.info Modern JavaScript Tutorial 项目地址: https://gitcode.com/gh_mirrors/en/en.javascript.info

前言

在现代Web开发中，处理文件是一个常见的需求。无论是上传用户头像、解析Excel表格，还是实现拖拽上传功能，都需要对文件对象有深入理解。本文将详细介绍JavaScript中的File和FileReader对象，帮助你掌握文件操作的核心知识。

File对象详解

File对象继承自Blob对象，并扩展了与文件系统相关的功能。我们可以通过两种主要方式获取File对象：

1. 构造函数创建

new File(fileParts, fileName, [options])

参数说明：

fileParts：由Blob/BufferSource/String值组成的数组
fileName：文件名（字符串）
options：可选配置对象，可包含lastModified属性（最后修改时间戳）

2. 从用户输入获取

更常见的方式是通过HTML文件输入元素获取：

<input type="file" id="fileInput">

JavaScript处理代码：

document.getElementById('fileInput').addEventListener('change', function(event) {
  const file = event.target.files[0];
  console.log(`文件名: ${file.name}`);
  console.log(`文件大小: ${file.size} bytes`);
  console.log(`最后修改时间: ${new Date(file.lastModified)}`);
});

关键点：

input元素的files属性是一个类数组对象，即使只选择了一个文件
File对象继承了Blob的所有属性和方法，额外添加了name和lastModified属性

FileReader对象深入解析

FileReader是专门用于从Blob（包括File）对象中读取数据的对象。由于文件读取是异步操作，FileReader采用事件机制来通知读取状态。

核心方法

readAsArrayBuffer(blob)
- 读取结果为ArrayBuffer二进制格式
- 适合处理二进制文件，如图片、视频等
readAsText(blob, [encoding])
- 读取结果为文本字符串
- 可指定编码格式（默认utf-8）
- 适合处理文本文件，如CSV、JSON等
readAsDataURL(blob)
- 读取结果为Base64编码的数据URL
- 适合直接用于img标签的src属性
abort()
- 中止读取操作

事件处理

FileReader在读取过程中会触发一系列事件：

const reader = new FileReader();

reader.onloadstart = function() {
  console.log('开始读取文件');
};

reader.onprogress = function(event) {
  // 可以用于实现进度条
  if (event.lengthComputable) {
    const percentLoaded = Math.round((event.loaded / event.total) * 100);
    console.log(`已加载: ${percentLoaded}%`);
  }
};

reader.onload = function() {
  console.log('文件读取成功');
  console.log(reader.result); // 读取结果
};

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

reader.onloadend = function() {
  console.log('读取结束（无论成功或失败）');
};

实际应用示例

示例1：预览图片

function previewImage(file) {
  const reader = new FileReader();
  
  reader.onload = function(e) {
    const img = document.createElement('img');
    img.src = e.target.result;
    document.body.appendChild(img);
  };
  
  reader.readAsDataURL(file);
}

示例2：解析文本文件

function readTextFile(file) {
  const reader = new FileReader();
  
  reader.onload = function(e) {
    const lines = e.target.result.split('\n');
    lines.forEach(line => console.log(line));
  };
  
  reader.readAsText(file);
}