在众多HTML5规范中,有一部分规范是跟文件处理有关的,在早期的浏览器技术中,处理小量字符串是js最擅长的处理之一。但文件处理,尤其是二进制文件处理,一直是个空白。在一些情况下,我们不得不通过Flash/ActiveX/NP插件或云端的服务器处理较为复杂或底层的数据。今天,HTML5的一系列新规范正在致力于让浏览器具备更强大的文件处理能力。

今天要介绍的FileAPI,就是为解决这类问题而生的。

总览

FileAPI是一些列文件处理规范的基础,包含最基础的文件操作的JavaScript接口设计。其中最主要的接口定义一共有4个:

◆ FileList接口: 可以用来代表一组文件的JS对象,比如用户通过input[type="file"]元素选中的本地文件列表,

◆ Blob接口: 用来代表一段二进制数据,并且允许我们通过JS对其数据以字节为单位进行“切割”,关于Blob对象

◆ File接口: 用来代步一个文件,是从Blob接口继承而来的,并在此基础上增加了诸如文件名、MIME类型之类的特性,关于File对象

◆ FileReader接口: 提供读取文件的方法和事件

这里有两点细节需要注意:

1. 我们平时使用input[type="file"]元素都是选中单个文件,其本身是允许同时选中多个文件的,所以会用到FileList

2. Blob接口和File接口可以返回数据的字节数等信息,也可以“切割”,但无法获取真正的内容,这也正是FileReader存在的意义,而文件大小不一时,读取文件可能存在明显的时间花费,所以我们用异步的方式,通过触发另外的事件来返回读取到的文件内容

接口描述

这4个接口其实并不复杂,也很好理解(接口中的“#Foo”表示任意Foo类型的对象):

FileList接口

  1. #FileList[index] // 得到第index个文件

Blob接口

  1. #Blob.size // 只读特性,数据的字节数
  2. #Blob.slice(start, length) // 将当前文件切割并将结果返回

File接口

  1. #File.size // 继承自Blob,意义同上
  2. #File.slice(start, length) // 继承自Blob,意义同上
  3. #File.name // 只读属性,文件名
  4. #File.type // 只读属性,文件的MIME类型
  5. #File.lastModifiedDate // 只读属性,最后文件修改时间

FileReader方法

  1. #FileReader.readAsArrayBuffer(blob/file) //将读取结果 封装成 ArrayBuffer ,如果想使用一般需要转换成 Int8Array或DataView
  2. #FileReader.readAsBinaryString(blob/file) // 以二进制格式读取文件内容
  3. #FileReader.readAsText(file, [encoding]) // 以文本(及字符串)格式读取文件内容,并且可以强制选择文件编码
  4. #FileReader.readAsDataURL(file) // 以DataURL格式读取文件内容
  5. #FileReader.abort() // 终止读取操作

FileReader事件

  1. #FileReader.onloadstart // 读取操作开始时触发
  2. #FileReader.onload // 读取操作成功时触发
  3. #FileReader.onloadend // 读取操作完成时触发(不论成功还是失败)
  4. #FileReader.onprogress // 读取操作过程中触发
  5. #FileReader.onabort // 读取操作被中断时触发
  6. #FileReader.onerror // 读取操作失败时触发

FileReader属性

  1. #FileReader.result // 读取的结果(二进制、文本或DataURL格式)
  2. #FileReader.readyState // 读取操作的状态(EMPTY、LOADING、DONE)

代码示例

举例一:控制file控件,读取其中的第二个文件,并将其文本内容在控制台输出

  1. var input = document.querySelector('input[type="file"]'); // 找到第一个file控件
  2. var firstFile = input.files[0]; // file控件的files特性其实就是一个FileList类型的对象
  3. var secondFile = input.files[1]; // 当file控件的multiple特性为true时,我们可以同时选择多个文件,通过input.files[n]可以按序访问这些文件
  4. var reader = new FileReader(); // 新建一个FileReader类型的对象
  5. reader.readAsText(secondFile); // 按文本格式读取file控件中的第二个文件
  6. reader.onloadend = function (e) { // 绑定读取操作完成的事件
  7. console.log(reader.result); // 取得读取结果并输出
  8. };

举例二:给一个含utf-8编码的文本文件file去掉BOM头信息

  1. var size = file.size; // 先取得文件总字节数
  2. var result = file.slice(3, size - 3); // 用slice方法去掉开头的3个字节

最后,对FileAPI实践的注意

规范中还明确规定了各种出错处理和异常处理,这些内容是同样重要的:不论对于一套完备的规范,还是对于一个健壮的程序而言。由于篇幅有限,这部分就不细说了,大家可以在W3C官网自由查阅

以上就是FileAPI的简单介绍。万丈高楼平地起,后面的文件操作会更神奇更有趣。

更多:

HTML5 FileAPI读取实例---(一)

HTML5中的二进制大对象Blob(转)

HTML5 File 对象

HTML5 文件域+FileReader 读取文件(一)

HTML5 FileReader读取Blob对象API详解

原文:http://bulaoge.net/topic.blg?dmn=g3g4&tid=2344378#Content

HTML5 文件处理之FileAPI简介整理的更多相关文章

  1. 基于HT for Web矢量实现HTML5文件上传进度条

    在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...

  2. html5 文件拖拽上传

    本文首先发表在  码蜂笔记 : http://coderbee.net/index.php/web/20130703/266 html5 文件拖拽上传是个老话题了,网上有很多例子,我一开始的代码也是网 ...

  3. HTML5文件上传还有进度条

    以下是自学it网--中级班上课笔记 网址:www.zixue.it 需要在chrome,ff,IE10下运行 html页面 <!DOCTYPE html> <html lang=&q ...

  4. HTML5文件操作API

    HTML5文件操作API       一.文件操作API 在之前我们操作本地文件都是使用flash.silverlight或者第三方的activeX插件等技术,由于使用了这些技术后就很难进行跨平台.或 ...

  5. CDN存储和加速静态文件是什么回事(整理)(CDN是什么)

    CDN存储和加速静态文件是什么回事(整理)(CDN是什么) 一.总结 一句话总结: 内容分发网络:Content Delivery Network:依靠网络中的各个节点,就近发放静态资源. CDN的全 ...

  6. HTML5 本地文件操作之FileSystemAPI简介

    一.FileSystemAPI简介 HTML5的文件操作Api中 1.FileAPI,用于基础的客户端本地文件读取,目前大多数接口已经被主流浏览器支持,点击查看更多参考 2.FileSystemAPI ...

  7. HTML5 文件操作API

    简介 我常常想,如果网络应用能够读取和写入文件与目录,将会非常方便.从离线转移到在线后,应用变得更加复杂,而文件系统方面的API的缺乏也一直阻碍着网络前进.存储二进制数据或与其进行交互不应局限于桌面. ...

  8. 打造 html5 文件上传组件,实现进度显示及拖拽上传,支持秒传+分片上传+断点续传,兼容IE6+及其它标准浏览器

    老早就注册了博客园帐号,昨天才发现,连博客都没开,Github也是一样,深觉惭愧,赶紧潜个水压压惊`(*∩_∩*)′ 言归正传.大概许多人都会用到文件上传的功能,上传的库貌似也不少,比如(jQuery ...

  9. HTML 5中的文件处理之FileAPI(转载)

    原文地址:http://developer.51cto.com/art/201202/319435.htm 在众多HTML5规范中,有一部分规范是跟文件处理有关的,在早期的浏览器技术中,处理小量字符串 ...

随机推荐

  1. nodejs广播

    http://site.douban.com/185124/widget/notes/10805558/note/240909343/ http://t42dw.iteye.com/blog/1767 ...

  2. node场景

    http://www.zhihu.com/question/19653241 http://www.csdn.net/article/2012-05-03/2805296 http://limu.it ...

  3. 支付宝openssl漏洞肆虐 互联网巨头称目前已修复

    支付宝openssl漏洞肆虐 互联网巨头称目前已修复 金山毒霸安全专家李铁军表示,这个漏洞使黑客可以远程读取https服务器的随机64KB内存,“只要这个黑客有耐心多捕获多分析那些64KB的数据,用户 ...

  4. Java中类Exchaner浅析

    Exchaner用于实现两个人之间的数据交换,每个人在完成一定的事物后想与对方交换数据,第一个先拿出数据的人将一直等待第二个人拿着数据到来时,才能彼此交换数据. 张孝祥老师在讲解Exchaner时的比 ...

  5. bzoj3437

    练一下斜率优化 ..] of int64; q,a,b:..] of longint; i,n,h,t,j:longint; function g(j,k:longint):double; var a ...

  6. 如何查看jar包的版本号?

    jar包根目录里的META-INF目录下的MANIFEST.MF文件里一般有会记录版本信息,可以到这个文件里查看   打开Java的JAR文件我们经常可以看到文件中包含着一个META-INF目录,这个 ...

  7. (转载)php获取mysql版本的几种方法小结

    (转载)http://www.jb51.net/article/13930.htm 查询当前连接的MYSQL数据库的版本,可以用下面SQL语句来实现 select VERSION(); 当前$res= ...

  8. pm grant 命令

    CustomLocale.apk所需要的权限"android.permission.CHANGE_CONFIGURATION"自Android 4.2,4.2.2起系统定义为and ...

  9. [PHP] 跳转以及回到原来的地址

    回到原来的地址: 1.PHP(PHP代码) Header('Location:'.$_SERVER["HTTP_REFERER"]); 2.JavaScript(相当于后退按钮,- ...

  10. [QT]构建正则表达式测试

    正则表达式是个强大的东西 暂时先记录一个用法: QString str = "Peak memory: KEY s"; QString data = "Peak memo ...