JavaScript FileReader详解|极客笔记

JavaScript FileReader详解

JavaScript中的FileReader是一个用于读取文件内容的Web API，它可以在浏览器中异步读取文件内容，并且将文件内容作为文本字符串或DataURL返回以便进行后续操作。本文将详细介绍JavaScript中FileReader的用法和示例代码。

FileReader基本用法

FileReader主要用于读取本地文件，可以实现文件的预览、上传、操作等功能。它主要提供了以下几种方法：

FileReader.readAsText(file, encoding)：以文本形式读取文件内容。
FileReader.readAsDataURL(file)：读取文件内容并返回一个DataURL，可以用于将文件内容展示在页面上。
FileReader.readAsArrayBuffer(file)：以ArrayBuffer形式读取文件内容，适用于处理二进制文件。
FileReader.readAsBinaryString(file)：以二进制字符串形式读取文件内容，已废弃，不建议使用。

FileReader使用示例

以文本形式读取文件内容

// 创建FileReader对象
let reader = new FileReader();

// 读取文件
document.getElementById('fileInput').addEventListener('change', function(e){
  let file = e.target.files[0];
  reader.readAsText(file, 'UTF-8');
});

// 读取完成后的回调函数
reader.onload = function(e){
  console.log(e.target.result); // 输出文件内容
};

运行以上代码，当选择一个文件后，控制台会输出该文件的内容。

以DataURL形式读取文件内容

// 创建FileReader对象
let reader = new FileReader();

// 读取文件
document.getElementById('fileInput').addEventListener('change', function(e){
  let file = e.target.files[0];
  reader.readAsDataURL(file);
});

// 读取完成后的回调函数
reader.onload = function(e){
  console.log(e.target.result); // 输出文件的DataURL
};

运行以上代码，当选择一个图片文件后，控制台会输出该文件的DataURL，可以将其展示在页面上。

以ArrayBuffer形式读取文件内容

// 创建FileReader对象
let reader = new FileReader();

// 读取文件
document.getElementById('fileInput').addEventListener('change', function(e){
  let file = e.target.files[0];
  reader.readAsArrayBuffer(file);
});

// 读取完成后的回调函数
reader.onload = function(e){
  let arrayBuffer = e.target.result; // 获取ArrayBuffer
  // 对ArrayBuffer进行操作
};

运行以上代码，可以以ArrayBuffer的形式读取文件内容，适用于处理二进制文件。

FileReader错误处理

在使用FileReader时，需要注意处理一些可能出现的错误情况，例如文件读取失败或文件类型不支持等情况。使用try…catch语句可以捕获这些错误。

let reader = new FileReader();

document.getElementById('fileInput').addEventListener('change', function(e){
  let file = e.target.files[0];
  try {
    reader.readAsText(file, 'UTF-8');
  } catch(error) {
    console.error('File read error: ', error);
  }
});

reader.onerror = function(){
  console.error('File read error: ', reader.error);
};

以上代码展示了如何捕获文件读取过程中的错误，保证文件读取过程的稳定性。