FileReader对象

  FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 FileBlob 对象指定要读取的文件或数据。

文件处理是一系列的流程。每一步我们都需要知道,自己能做什么,自己做了什么。

1.获取文件

前端中,获取文件必须使用input标签

<input id='file' type='file' />

处理这个文件。这里主要是使用input标签的onchange事件。

var file = document.getELementById('file');
file.onchange = function(e){
    var files = e.target.files;    //这个files就是获取的file文件的一个数组。之后你可以使用任何方式来操作它。
}

2.读取文件

(1)读取文件,主要使用的是FileReader类。它提供了几个方法

readAsText(file, encoding) —— 以纯文本形式读取文件,读取到的文本保存在result属性中。第二个参数代表编码格式。

readAsDataUrl(file) —— 读取文件并且将文件以数据URI的形式保存在result属性中。

readAsBinaryString(file)——读取文件并且把文件以字符串保存在result属性中。

readAsArrayBuffer(file)——读取文件并且将一个包含文件内容的ArrayBuffer保存咋result属性中。

(2)文件读取的过程是异步操作,在这个过程中提供了三个事件progress、error、load事件

progress——每隔50ms左右,会触发一次progress事件。

error——在无法读取到文件信息的条件下触发。

load——在成功加载后就会触发。

原文地址:https://www.cnblogs.com/codexlx/p/13036661.html