HTML5使用本地文件之FileReader

FileAPI提供了标准的在浏览器中与用户选择文件进行交互的方法。FileAPI的接口分为三种功能部分。在FileList接口中选择一个或多个文件。通过File接口读取文件的属性。通过FileReader接口读取文件。...



File API 介绍

File API提供了标准的在浏览器中与用户选择文件进行交互的方法。File API的接口分为三种功能部分。

    1、在FileList接口中选择一个或多个文件。

2、通过File接口读取文件的属性。

3、通过FileReader接口读取文件。

FileList 接口是由用户选择的文件列表，可以你数组一样遍历。一个FileList对象通常来自于一个HTML input元素的files属性,你可以通过这个对象访问到用户所选择的文件。

File接口提供选择的文件的属性。通过这两个接口，可以遍历选择的文件并读取下面列出的关键属性。

name：文件名

type：ASCII编码、MIME格式的文件类型。size：文件所占字节。这里需要计算一下，我们通常都是以KB来计算大小的，1KB=1024b，所以我们在计算时注意单位是什么。

来个简单的例子看下File接口是如何使用的：

html部分：



js部分：



输出结果：



FileReader接口

创建FileReader对象：

var fileReader=new FileReader();

fileReader读取方法

readAsArrayBuffer(Blob)以ArrayBuffer格式返回文件内容。

readAsBinaryString(Blob)以二进制字符串返回文件内容。

readAsText(Blob[,encoding])以DOMString文本返回文件内容。

readAsDataURL(Blob)以数据URL DOMString返回文件内容。

fileReader事件

onloadstart文件读取操作开始时触发

onprogress浏览器读取文件过种中触发

onabort执行放弃操作时触发

onerror文件读取过程中出现错误时触发

onload文件成功读取后触发

onloadend文件读取完成后(无论成功或失败)触发

通过FileReader预览图片

要想在页面上显示本地图片，以前我们通常的做法是将选择的图片文件上传至后端服务器，后端对其进行存储，再将图片的URL返回到前端，前端通过这个URL来显示图片。而HTML5的FileReader接口支持本地预览，FileReader接口主要是将文件读入内存，并提供相应的方法，来读取文件中的数据，当然就能显示本地图片不需上传了。

这里主要用到FileReader的readAsDataURL方法，通过将图片数据读取成Data URL的方法，将图片展示出来，示例：



JS部分



注: IE10以下的版本不支持FileReader()构造函数.不过可以利用滤镜来兼容旧版本的IE:

if (navigator.appName === "Microsoft Internet Explorer") {

return function () {

document.getElementById("imagePreview").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById("imageInput").value;

}

}

怎么样，可以看来我们并没有和后台交互就能将本地图片显示在页面中.

File API兼容性

不同浏览器提供了不同级别的支持。下面列出了各个浏览器的支持情况

浏览器/设备        兼容

Android                  3.0+

Chrome                   9.0+

Firefox                   3.6+

Internet Explorer  10.0+

IOS Safari              -

opera                   11.1+

Safari                      -

    关注 web前端开发之家