HTML5的FileAPI应用

HTML5新增了很多特性，其中

File

API

是非常重要的部分。在肉大师中，我大量使用了

HTML5

的文件

API

，这样一来可以给予用户近乎桌面软件的体验，二来还能减少服务器和

带宽的消耗。今天终于把最后几个问题解决了，在这里总结下

HTML5

File

API

的使用。

用途

在

W3C

页面上，列出了

File

API

可能用到的场合（以下为意译，可能有所偏颇，欢迎对比

原文阅读）

：

断点续传

上传时，先把目标文件复制到本地沙箱，然后分解逐块上传

浏览器崩溃或者网络中断也没关系，因为恢复后可以续传

需要大量媒体素材的应用，比如视频游戏

下载压缩包，在本地解压，就能恢复之前目录结构

跨平台

通过渐进式下载，

进入新关卡或者开启新功能均无需等待，

因为玩的时候所需素材已经通过

后台下载完成了

从本地缓存中直接读取素材，速度飞快

二进制文件也不在话下

使用压缩包可以大大减轻带宽和服务器消耗，也避免了频繁下载碎片文件带来的检索问题

离线图片

/

音频编辑器通

不怕频繁读写大量数据

只想重写文件的某些部分也能做到（比如修改

ID3

或者

EXIF

信息）

创建目录组织项目后用起来舒服多了

编辑完的文件还能被

iTunes

、

Picasa

之类的本地应用访问

离线视频播放器

下载超过

1G

的大文件，将来想看再看

可以在不同时间点间来回跳转播放

能够给

Video

标签提供

URL

即便片子还没下完，也能把下载到的部分先睹为快

还能任意截取一段视频交给

Video

标签播放

离线邮件客户端

下载保存附件到本地自不必说

断网的情况下，可以缓存用户要上传的附件，以后再上传

需要时可以列出缓存里的附件，通过缩略图显示，预览后上传

能像正常服务器那样触发标准的下载动作

不仅能使用

XHR

一次性上传全部内容，还可以把邮件和附件拆解成小块依次发送