HTML5新增了很多特性,其中File API是非常重要的部分。在肉大师中,我大量使用了HTML5的文件API,这样一来可以给予用户近乎桌面软件的体验,二来还能减少服务器和带宽的消耗。今天终于把最后几个问题解决了,在这里总结下HTML5 File API的使用。
随着用的越来越多,发现自己其实搞混了“File API和FileSystem API”两个东西。而且类写的也有问题。等到有空的时候把这篇文章重写一下好了。(2012-09-13)
用途
在W3C页面上,列出了File API可能用到的场合(以下为意译,可能有所偏颇,欢迎对比原文阅读):
- 断点续传
- 上传时,先把目标文件复制到本地沙箱,然后分解逐块上传
- 浏览器崩溃或者网络中断也没关系,因为恢复后可以续传
- 需要大量媒体素材的应用,比如视频游戏
- 下载压缩包,在本地解压,就能恢复之前目录结构
- 跨平台
- 通过渐进式下载,进入新关卡或者开启新功能均无需等待,因为玩的时候所需素材已经通过后台下载完成了
- 从本地缓存中直接读取素材,速度飞快
- 二进制文件也不在话下
- 使用压缩包可以大大减轻带宽和服务器消耗,也避免了频繁下载碎片文件带来的检索问题
- 离线图片/音频编辑器通
- 不怕频繁读写大量数据
- 只想重写文件的某些部分也能做到(比如修改ID3或者EXIF信息)
- 创建目录组织项目后用起来舒服多了
- 编辑完的文件还能被iTunes、Picasa之类的本地应用访问
- 离线视频播放器
- 下载超过1G的大文件,将来想看再看
- 可以在不同时间点间来回跳转播放
- 能够给Video标签提供URL
- 即便片子还没下完,也能把下载到的部分先睹为快
- 还能任意截取一段视频交给Video标签播放
- 离线邮件客户端
- 下载保存附件到本地自不必说
- 断网的情况下,可以缓存用户要上传的附件,以后再上传
- 需要时可以列出缓存里的附件,通过缩略图显示,预览后上传
- 能像正常服务器那样触发标准的下载动作
- 不仅能使用XHR一次性上传全部内容,还可以把邮件和附件拆解成小块依次发送
听起来都是些令人振奋的功能,实际用起来还是要踩点坑。下面就把我的经验分享一下。