在众多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接口

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

Blob接口

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

File接口

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

FileReader方法

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

FileReader事件

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

FileReader属性

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

代码示例

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

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

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

var size = file.size; // 先取得文件总字节数
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. NSUserDefaults(数据存储)

    NSUserDefaults(数据存储)   NSUserDefaults适合存储轻量级的本地数据,比如要保存一个登陆界面的数据,用户名.密码之类的,个人觉得使用NSUserDefaults是首选.下 ...

  2. Condition 的使用

    Condition 将 Object 监视器方法(wait.notify 和 notifyAll)分解成截然不同的对象,以便通过将这些对象与任意 Lock 实现组合使用,为每个对象提供多个等待 set ...

  3. 14.5.5 Deadlocks in InnoDB

    14.5.5 Deadlocks in InnoDB 14.5.5.1 An InnoDB Deadlock Example 14.5.5.2 Deadlock Detection and Rollb ...

  4. bzoj2007

    首先不难发现海拔高度只能为0或1 因为决策是单调的 不难发现最优决策一定是划分为海拔为0和1两块,不会出现01相间的情况 所以这很明显是一个最小割 由于n*n很大,我们必须要用平面图最小割转化为最短路 ...

  5. 【索引】Objective-C基础教程-读书笔记

    第1章 启程 http://www.cnblogs.com/duxiuxing/p/5492219.html 第2章 对C的扩展 第3章  面向对象编程的基础知识 第4章 继承 第5章 复合 第6章 ...

  6. ANDROID Porting系列二、配置一个新产品

    ANDROID Porting系列二.配置一个新产品 详细说明 下面的步骤描述了如何配置新的移动设备和产品的makefile运行android. 1.         目录//vendor/创建一个公 ...

  7. Hibernate 以流的方式获取数据

    hibernateQuery.setFetchSize(Integer.MIN_VALUE); results = hibernateQuery.scroll(ScrollMode.FORWARD_O ...

  8. 【转】关于android的输入法弹出来 覆盖输入框的有关问题

    今天发现一个问题,在录入信息页面.信息不多,但是输入法弹起后,内容已经超出页面,无滚动条,很不方便. 解决办法:在配置文件中,页面对应的Activity中添加 <activity android ...

  9. Linux下安装MySQL5.6

    传送门:http://www.jianshu.com/p/f4a98a905011 字数802 阅读164 评论0 喜欢4 环境:1.操作系统:CentOS release 6.8 (Final)2. ...

  10. CSS3 新增属性

    1Css3概述 从2010年开始,HTML5与CSS3就一直是互联网技术中最受关注的两个话题. 从前端技术的角度可以把互联网的发展分为三个阶段:第一阶段是web1.0以内容为主的网络 前端主流技术是H ...