HTML5 File API - DIVCSS5

在很多时候，Web应用需要访问用户本地文件，例如上传资料、展示照片等。HTML5提供了File API来帮助我们在Web页面中访问本地文件，它可以在Web应用中展现文件，或者选择并读取文件。当使用Google图像搜索时，你可以把一幅图片从电脑桌面拖放到Google页面的输入框里，这幅图像将会被自动上传并迅速展示出图片的搜索结果来（仅限于支持File API的现代浏览器，例如Chrome），相当便捷，这就是使用HTML5的File API实现的。

File API包含如下对象。

 FileList接口。

它包含一组File对象，所以我们一般通过它来获取文件。有两种方式可以得到FileList对象：第一种是通过<input type="file">标签，

例如var fileList =document.getElementById('input-file').files可以获取选择的所有文件对象；

而Drag & Drop API的dataTransfer也包含一个FileList对象，在后面的例子中你将会看到如何通过这种方式来读取文件。

 Blob接口。

Blob（Binary Large Object）指二进制大对象，代表文件原始的二进制数据。

Blog接口的size属性表示二进制流的大小，type属性表示文件类型，而slice函数用来分割Blob对象。

 File接口。

它继承自Blob接口，描述FileList里的一个文件，包含了文件的只读信息。它的name属性表示文件名，lastModifiedDate属性表示文件的上次修改时间。

 FileReader接口。

它提供了方法来读取文件，还提供了获取读取数据的事件模型。

 FileError和FileException。

它们定义了File API使用中的错误和异常。

1. 以前的同类解决方案

在以前，JavaScript是不允许访问本地文件的。要实现文件上传这样的功能，必须借助于浏览器的特定插件，例如IE里的ActiveX或者Flash。

2. File API的优点

File API提供了多种Web应用对本地文件的操作，并通过沙箱机制保证了操作的安全性。使用File API，我们的Web应用不需要再考虑所有浏览器的兼容性，代码的编写和维护变得更加容易。

3. 检测浏览器是否支持File API

判断当前浏览器是否支持File API的代码如下：

if(typeof window.FileReader === 'undefined'){

//此浏览器不支持File API

}

4. 读取文件函数

File API读取文件主要包括以下函数:

 readAsBinaryString(blob)。该函数接受一个Blob对象作为参数，通过二进制字符串形式读取文件内容。

 readAsText(blob)。该函数接受一个Blob对象作为参数，通过文本方式读取文件内容，默认采用UTF-8的编码方式。

 readAsDataURL(blob)。该函数接受一个Blob对象作为参数，通过加密的Data URL方式读取文件内容。Data URL协议由RFC2397定义，具体可以参考http://www.ietf.org/rfc/rfc2397.txt。如果要直接在页面里显示图片，一般采用readAsDataURL读取图片内容，后面的示例采用了这种方式。

 readAsArrayBuffer(blob)。该函数接受一个Blob对象作为参数，并以ArrayBuffer对象的形式读取文件内容。

上面函数的参数也可以是File对象，因为File继承自Blob接口。

5. 一个简单实例

结合前面介绍过的拖放API，我们实现一个图片拖放并展示的简单示例，详细功能是从Windows文件系统中拖放一幅图片文件到浏览器页面里，页面将会把这幅图片的边缘加上白色虚化效果并显示出来。

在这个示例里，我们将用到HTML5的File API和Drag & Drop API，以及css3的Mask特性。

这个实例的HTML和CSS代码如代码如下：

#box{ /* 容器基本样式 */

border: 2px gray dotted;

width: 171px;

height: 158px;

line-height: 158px;

text-align: center;

mask-image: url(mask.png); /* 实现虚化效果的遮罩图片 */

-webkit-mask-image: url(mask.png); /* Mask的WebKit兼容写法，目前仅WebKit内核浏览器支持

Mask */

mask-clip: content; /* 控制遮罩图片的显示区域，不挡住边框，可以去掉试试是什么效果*/

-webkit-mask-clip: content; /* Mask的WebKit兼容写法，目前仅WebKit内核浏览器支持Mask */

}

#box.hover{ /* 将鼠标拖曳到容器上时的样式 */

border: 2px olive solid;

}

#box.drop{ /*放置图片后的容器样式 */

border: 2px blue solid;

}

这个实例的JavaScript代码如下所示：

var box = document.getElementById('box');

//检测是否支持File API

if(typeof window.FileReader === 'undefined'){

alert('此浏览器不支持File API ');

}

box.ondragover = function(event){ //将鼠标拖曳到容器上时

this.innerHTML = '可以拖曳到此处';

this.className = 'hover';

event.dataTransfer.dropEffect = "copy";

return false;

};

box.ondragleave = function(){ //移出时

this.innerHTML = '';

this.className = '';

return false;

}

box.ondragend = function(){ //拖曳结束时

this.className = '';

return false;

};

box.ondrop = function(event){ //拖曳进行中

this.innerHTML = '';

this.className = 'drop';

var file = event.dataTransfer.files[0]; //通过Drag & Drop API的dataTransfer获取

//文件对象

var reader = new FileReader();

reader.onload = function (event){ //读取成功后

box.style.background = 'url(' + event.target.result + ') no-repeat center';

//将读取到的图像内容设置为容器的背景

};

reader.onerror = function(event){ //读取失败的操作

alert(event.target.error.code);

}

reader.readAsDataURL(file); //用DataURL的方式读取文件

event.preventDefault();

};

拖放前的框、拖放中的框、拖放后的框效果如下图所示：

拖放时的实际效果表现为，当拖曳图片到框内时，边框变为橄榄色实线，框内文字显示“可以拖曳到此处”；再把图片拖曳出框外时，边框还原为最初的灰色虚线框，框内文字消失；将图片放置到框里后，边框变为蓝色实线框，图片的边缘呈现白色虚化效果。你可以将多幅图片拖曳到框内来查看它们经过边缘白色虚化处理后的效果图，非常方便实用。

可能犯的4个错误

(1) onerror事件参数处理错误

onerror事件接受的参数是event事件，而不是error对象，要获得错误信息，可以使用event.target.error.code，它有如下几种类型。

 NOT_FOUND_ERR（值为1，文件未找到的错误）

 SECURITY_ERR（值为2，安全权限的错误）

 ABORT_ERR（值为3，读取操作放弃的错误）

 NOT_READABLE_ERR（值为4，不可读的错误）

 ENCODING_ERR（值为5，编码错误）

(2) 在本地Web页面中调用File API

在本地Web页面中调用File API是无法读取到文件内容的，HTML5的安全机制对此进行了控制。在本地页面调用File API时，在FileReader的onerror事件中可以捕获到的错误码为2，对应上面提到的SECURITY_ERR，表示是文件安全权限导致的错误。

如果要自己动手编写File API的示例，必须记得将页面放在用Apache或者IIS等搭建的Web服务器上。

(3) 没有阻止浏览器默认行为