本文共 1430 字，大约阅读时间需要 4 分钟。

文件File对象    该对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用File或Blob对象指定要读取的文件或数据。    其中File对象可以是来自用户在一个元素上选择文件后返回的FileList对象，也可以是来自拖拽操作生成的DataTransfer对象，    还可以是来自一个HTMLCanvasElement上执行 mozGetAsFile()方法后返回的结果；    Blob对象表示一个不可变、原始数据的类文件对象，它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream来用于数据操作，    Blob表示的不一定是JavaScript原生格式的数据，File接口基于Blob，继承了Blob的功能并将其扩展使其支持用户系统上的文件。    操作：        创建一个FileReader对象            var fReader = new FileReader();        方法：            abort()  终止该读取操作            开始读取指定的Blob对象或File对象中的内容            readAsDataURL()  URL格式的字符串表示的内容            readAsArrayBuffer()  ArrayBuffer对象表示的内容            readAsBinaryString()  原始二进制数据            readAsText()  字符串以表示的内容        属性：            error ： 在读取文件时发生的错误            readyState ： 表明FileReader对象的当前状态            result ： 读取到的文件内容            onabort ： 当读取操作被终止时调用            onerror ： 当读取操作发生错误时调用            onload ： 当读取操作成功完成时调用            onloadend ： 当读取操作完成时调用，不管是成功或者失败，该处理程序在onload或onerror之后调用            onloadstart ： 当读取操作将要开始之前调用            onprogress ： 在读取数据过程中周期性调用

以下是基本操作代码：

其中1.txt内容为：

在我们的页面当中，经常会上传一些文件，同时在上传之前还需要立即展示以下文件内容，使用FileReader API来读取本地文件，可以保存在本地，可快速展示，例如：上传头像，提交完图片立刻显示，还可以做裁剪，或拖拽文件，预览文件内容。

可见用这种方法图片返回的是url地址，之前读取文件的是返回base64编码，见下：

转载地址：http://avnqi.baihongyu.com/