HTML5 File API

1、html5 file api在无数时候，web应用需要拜访用户本地文件，例如上传资料、展示照片等。html5提供了file api来协助我们在web页面中拜访本地文件，它可以在web应用中呈现文件，或者挑选并读取文件。当用法google图像搜寻时，你可以把一幅从电脑桌面拖放到google页面的输入框里，这幅图像将会被自动上传并快速展示出的搜寻结果来（仅限于支持file api的现代扫瞄器，例如chrome），相当便捷，这就是用法html5的file api实现的。 file api包含如下对象。q filelist接口。它包含一组file对象，所以我们普通通过它来猎取文件。有两种方式可以得到f

2、ilelist对象：第一种是通过标签，例如var filelist =document.getelementbyid(&39;input-file&39;).files可以猎取挑选的全部文件对象；而drag & drop api的datatransfer也包含一个filelist对象，在后面的例子中你将会看到如何通过这种方式来读取文件。 q blob接口。blob（binary large object）指二进制大对象，代表文件原始的二进制数据。blog接口的size属性表示二进制流的大小，type属性表示文件类型，而slice函数用来分割blob对象。q fi

3、le接口。它继承自blob接口，描述filelist里的一个文件，包含了文件的只读信息。它的name属性表示文件名，lastmodifieddate属性表示文件的上次修改时光。q filereader接口。它提供了办法来读取文件，还提供了猎取读取数据的大事模型。q fileerror和fileexception。它们定义了file api用法中的错误和异样。 1. 以前的同类解决计划在以前，javascript是不允许拜访本地文件的。要实现文件上传这样的功能，必需借助于扫瞄器的特定插件，例如ie里的activex或者flash。 2. file api的优点file api提供了多种web应用

4、对本地文件的操作，并通过沙箱机制保证了操作的平安性。用法file api，我们的web应用不需要再考虑全部扫瞄器的兼容性，代码的编写和维护变得越发简单。 3. 检测扫瞄器是否支持file api推断当前扫瞄器是否支持file api的代码如下：if(typeof window.filereader = &39;undefined&39;)/此扫瞄器不支持file api 4. 读取文件函数file api读取文件主要包括以下函数: q readasbinarystring(blob)。该函数接受一个blob对象作为参数，通过二进制字符串形式读取文件内容。q readastext

5、(blob)。该函数接受一个blob对象作为参数，通过文本方式读取文件内容，默认采纳utf-8的编码方式。q readasdataurl(blob)。该函数接受一个blob对象作为参数，通过加密的data url方式读取文件内容。data url协议由rfc2397定义，详细可以参考/rfc/rfc2397.txt。假如要挺直在页面里显示，普通采纳readasdataurl读取内容，后面的示例采纳了这种方式。q readasarraybuffer(blob)。该函数接受一个blob对象作为参数，并以arraybuffer对象的形式读取文件内容。 上面函数的参

6、数也可以是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;te

7、xt-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 o

8、live solid;box.drop /*放置后的容器样式 */border: 2px blue solid; 这个实例的javascript代码如下所示：var box = document.getelementbyid(&39;box&39;);/检测是否支持file apiif(typeof window.filereader = &39;undefined&39;)alert(&39;此扫瞄器不支持file api &39;);box.ondragover = function(event) /将鼠标拖曳到容器上时this.innerh

9、tml = &39;可以拖曳到此处&39;this.classname = &39;hover&39;event.datatransfer.dropeffect = "copy"return false;box.ondragleave = function() /移出时this.innerhtml = &39;&39;this.classname = &39;&39;return false;box.ondragend = function() /拖曳结束时this.classname = &a

10、mp;39;&39;return false;box.ondrop = function(event) /拖曳举行中this.innerhtml = &39;&39;this.classname = &39;drop&39;var file = event.datatransfer.files0; /通过drag & drop api的datatransfer猎取/文件对象var reader = new filereader();reader.onload = function (event) /读取胜利后box.style.backg

11、round = &39;url(&39; + event.target.result + &39;) no-repeat center&39;/将读取到的图像内容设置为容器的背景;reader.onerror = function(event) /读取失败的操作alert(event.target.error.code);reader.readasdataurl(file); /用dataurl的方式读取文件event.preventdefault(); 拖放前的框、拖放中的框、拖放后的框效果如下图所示： 拖放时的实际效果表现为，当拖曳到框内时，边框变为橄榄色实

12、线，框内文字显示可以拖曳到此处；再把拖曳出框外时，边框还原为最初的灰色虚线框，框内文字消逝；将放置到框里后，边框变为蓝色实线框，的边缘展现白色虚化效果。你可以将多幅拖曳到框内来查看它们经过边缘白色虚化处理后的效果图，十分便利有用。 可能犯的4个错误(1) onerror大事参数处理错误onerror大事接受的参数是event大事，而不是error对象，要获得错误信息，可以用法event.target.error.code，它有如下几种类型。q not_found_err（值为1，文件未找到的错误）q security_err（值为2，平安权限的错误）q abort_err（值为3，读取操作放弃

13、的错误）q not_readable_err（值为4，不行读的错误）q encoding_err（值为5，编码错误） (2) 在本地web页面中调用file api在本地web页面中调用file api是无法读取到文件内容的，html5的平安机制对此举行了控制。在本地页面调用file api时，在filereader的onerror大事中可以捕捉到的错误码为2，对应上面提到的security_err，表示是文件平安权限导致的错误。假如要自己动手编写file api的示例，必需记得将页面放在用apache或者iis等搭建的web服务器上。 (3) 没有阻挡扫瞄器默认行为dragover和dragend大事都必需用法event.pre