FileReader详解

我在Google Chrome Web Store上发布了一个案例hahaOCR，该扩展程序可以帮助用户识别出图片中的文字信息，并以文本形式显示，大家可以在chrome网上应用商店中找到我发布的应用程序，如图所示：

图1 - hahaOCR

该扩展程序支持用户通过文件上传按钮上传图片，请看演示效果：

图2 - 测试图片

图3 - 测试效果

接下来，我们将在本文中详细讲解该案例所涉及的文件（图片）处理模块。

参考资料

MDN Web Docs：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

1. FileReader概述

该对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用File或Blob对象指定要读取的文件或数据。其中File对象可以是来自用户在一个<input/>元素上选择文件后返回的FileList对象，也可以是来自拖拽操作生成的DataTransfer对象，还可以是来自一个HTMLCanvasElement上执行 mozGetAsFile()方法后返回的结果；Blob对象表示一个不可变、原始数据的类文件对象，它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream来用于数据操作，Blob表示的不一定是JavaScript原生格式的数据，File接口基于Blob，继承了Blob的功能并将其扩展使其支持用户系统上的文件。

2. FileReader属性

为了更加直观的解释FileReader的三个属性，我们来看一段简单的代码：

<input type="file" id="file" onchange="readFile(this.files[0])">

window.readFile = (file) => {console.log(file)console.log(file.type)var reader = new FileReader()console.log(reader)
}

上述代码中，我们定义了一个文件上传按钮，我们只对用户上传的第一个文件进行处理，当用户完成上传操作之后，我们来看一下控制台输出的信息：

图4 - FileReader属性

我们在上述代码中指定了三个console，第一个console输出了用户所上传文件的相关信息；第二个console输出了用户所上传文件的type；第三个console输出了FileReader实例的相关信息，请看解释：

FileReader.error(只读属性)
该属性表示在读取文件时发生的错误，图1中显示error值为null，表示在读取用户所上传文件时没有出错。
FileReader.readyState（只读属性）
该属性表示FileReader状态的数字，请看取值：

常量名	值	描述
EMPTY	0	还没有加载任何数据
LOADING	1	数据正在被加载
DONE	2	已完成全部的读取请求

图1中显示readyState值为0，因为我们并没有加载任何数据，尽管我们完成了图片的上传，但我们并没有指定任何方法来读取该图片文件。

FileReader.result（只读属性）
该属性表示文件的内容，仅在读取操作完成之后才有效，数据的格式取决于使用哪个方法来启动读取操作，图1中result值为null，因为我们并没有指定读取当前所上传文件的方法，接下来，我们通过FileReader.readAsDataURL()方法来读取一下该图片，请看代码：

window.readFile = (file) => {var reader = new FileReader()console.log(reader)reader.readAsDataURL(file)reader.onload = (res) => {console.log(res)}
}

请看控制台信息：

图5 - readAsDataURL方法

上述代码中，我们通过FileReader.readDataAsURL()方法读取用户所上传的图片文件，当读取完成后，其result属性中将包含一个data:URL格式的Base64字符串以表示所读取文件的内容，关于读取用户所上传文件的更多方法，请参考第三小节。

3. FileReader方法

接下来，我们来看一下FileReader接口的几个方法：

方法	描述
FileReader.abort()	终止读取操作，在返回时，该属性的值为`DONE`
FileReader.readAsArrayBuffer()	开始读取指定的`Blob`中的内容，一旦完成，`result`属性中保存的是被读取文件的`ArrayBuffer`数据对象
FileReader.readAsBinaryString()	开始读取指定的`Blob`中的内容，一旦完成，`result`属性中将包含所读取文件的原始二进制数据
FileReader.readAsDataURL()	开始读取指定的`Blob`中的内容，一旦完成，`result`属性中将包含一个`data:URL`格式的`Base64`字符串以表示所读取文件的内容
FileReader.readAsText()	开始读取指定的`Blob`中的内容，一旦完成，`result`属性中将包含一个字符串以表示所读取的文件内容

如上表所示，对于不同的文件我们可以采取不同的方法来完成读取操作，接下来，我们通过FileReader.readAsText()方法来读取一个文本，请看代码：

图6 - 文本内容

window.readFile = (file) => {var reader = new FileReader()console.log(reader)reader.readAsText(file)reader.onload = (res) => {console.log(res)}
}

请看演示效果：

图7 - readAsText方法

4. FileReader事件

我们继续来看FileReader接口的几个事件处理方法：

方法	描述
FileReader.onabort()	处理`abort`事件，该事件在读取操作被中断时触发
FileReader.onerror()	处理`error`事件，该事件在读取操作发生错误时触发
FileReader.onload	处理`load`事件，该事件在读取操作完成时触发
FileReader.onloadstart	处理`loadstart`事件，该事件在读取操作开始时触发
FileReader.onloadend	处理`loadend`事件，该事件在读取操作结束时（成功或失败）触发
FileReader.onprogress	处理`progress`事件，该事件在读取`Blob`时触发

如上表所示，我们可以在用户上传文件的不同阶段指定不同的处理逻辑，请看代码：

<div class="example"><div class="file-select"><label for="avatar">Choose a profile picture:</label><input type="file"id="avatar" name="avatar"accept="image/png, image/jpeg"></div><img src="" class="preview" height="200" alt="Image preview..."><div class="event-log"><label>Event log:</label><textarea readonly class="event-log-contents" rows="20" cols="50"></textarea></div></div>

上述代码中，我们定义了一个文件上传按钮，具体来说是图片上传按钮；接着我们还定义了一个<img/>标签，其src属性值为空；最后，我们定义了一个文本输入框，用来显示不同事件处理程序读取图片文件的相关信息。

const fileInput = document.querySelector('input[type="file"]');
const preview = document.querySelector('img.preview');
const eventLog = document.querySelector('.event-log-contents');
const reader = new FileReader();function handleEvent(event) {console.log(event)eventLog.textContent = eventLog.textContent + `${event.type}: ${event.loaded} bytes transferred\n`;if (event.type === "load") {preview.src = reader.result;}
}function addListeners(reader) {reader.addEventListener('loadstart', handleEvent);reader.addEventListener('load', handleEvent);reader.addEventListener('loadend', handleEvent);reader.addEventListener('progress', handleEvent);reader.addEventListener('error', handleEvent);reader.addEventListener('abort', handleEvent);
}function handleSelected(e) {eventLog.textContent = '';const selectedFile = fileInput.files[0];if (selectedFile) {addListeners(reader);reader.readAsDataURL(selectedFile);}
}fileInput.addEventListener('change', handleSelected);

上述代码中，我们仅对用户上传的第一个图片文件进行处理（通过readAsDataURL方法读取）；我们还通过EventTarget.addEventListener方法将FileReader指定的6种监听器（事件处理程序）注册到reader上；最后当触发load事件时，将读取成功之后的内容，即data:URL格式的Base64字符串赋值给空<img/>标签的src属性，并最终显示在页面中，请看演示效果：

图8 - FileReader事件处理程序演示

5. 案例实战

最后，我们来看一下本文最开始提到的hahaOCR案例中的文件处理模块，实现该逻辑功能的思路其实很简单：用户通过按钮或拖拽操作上传图片，上传成功之后调用接口将图片中的文字信息显示在<textarea/>中，接下来，我们来看一下实现该功能的代码：

//此处是手动选择文件
$('#input').change(function() {event.preventDefault();var filesToUpload = document.getElementById('input').files;var img_file = [];for (var i = 0; i < filesToUpload.length; i++) {var file = filesToUpload[i];if (/image\/\w+/.test(file.type) && file != "undefined") {img_file.push(file);}}var reader = new FileReader();var AllowImgFileSize = 2100000; //上传图片最大值(单位字节)（ 2 M = 2097152 B ）超过2M上传失败var imgUrlBase64;if (img_file) {//将文件以Data URL形式读入页面imgUrlBase64 = reader.readAsDataURL(file);reader.onload = function (e) {if (AllowImgFileSize != 0 && AllowImgFileSize < reader.result.length) {alert( '上传失败，请上传不大于2M的图片！');return;}else{$.ajax({type: 'post',url: '***', //这里是数据请求接口dataType: 'json',data: {"showapi_appid": '***', //这里需要改成自己的appid"showapi_sign": '***',  //这里需要改成自己的应用的密钥secret"base64":reader.result,},error: function(XmlHttpRequest, textStatus, errorThrown) {alert("操作失败!");},success: function(result) {var res = result.showapi_res_body.texts[0];console.log(res)$("#exampleFormControlTextarea1").val(res)}});}}}hahaOCR.prototype.getImageFile(img_file, filesToUpload.length);
});