惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Cloudbric
Cloudbric
WordPress大学
WordPress大学
博客园 - 叶小钗
B
Blog RSS Feed
T
Tailwind CSS Blog
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
美团技术团队
Scott Helme
Scott Helme
D
Darknet – Hacking Tools, Hacker News & Cyber Security
Hugging Face - Blog
Hugging Face - Blog
T
Threat Research - Cisco Blogs
B
Blog
V
V2EX
Simon Willison's Weblog
Simon Willison's Weblog
I
Intezer
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
T
Threatpost
Cisco Talos Blog
Cisco Talos Blog
阮一峰的网络日志
阮一峰的网络日志
C
Cybersecurity and Infrastructure Security Agency CISA
PCI Perspectives
PCI Perspectives
雷峰网
雷峰网
The Register - Security
The Register - Security
博客园 - 【当耐特】
Google DeepMind News
Google DeepMind News
N
News and Events Feed by Topic
H
Hackread – Cybersecurity News, Data Breaches, AI and More
U
Unit 42
Security Latest
Security Latest
NISL@THU
NISL@THU
腾讯CDC
S
SegmentFault 最新的问题
小众软件
小众软件
The GitHub Blog
The GitHub Blog
月光博客
月光博客
A
Arctic Wolf
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
N
Netflix TechBlog - Medium
IT之家
IT之家
D
DataBreaches.Net
C
CXSECURITY Database RSS Feed - CXSecurity.com
N
News | PayPal Newsroom
L
LINUX DO - 最新话题
博客园 - 司徒正美
大猫的无限游戏
大猫的无限游戏
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
J
Java Code Geeks
TaoSecurity Blog
TaoSecurity Blog
P
Privacy International News Feed

囧克斯

奔四了,写给40岁的自己 有序退网 我和 Vue.js 的十年 我参与《代码之外 Beyond Code》的故事 博客站迁移至 VitePress 的备忘 写给我的奶奶 中文格式化小工具 zhlint 及其开发心得 vue-mark-display:用 markdown 语法轻松撰写幻灯片 我对技术会议的一些看法 VueConf Hangzhou 见闻 第四届 CSSConf CN 见闻 [译]Web 表单的未来 [译]苹果正在做一些他们的程序员明摆着不想要的东西 [译]为什么我不会无偿加班且你也不应该 [译]如果管理是唯一可走的路,那就完蛋了 [译]如何撰写 Git 提交信息 [译]C 程序的原则 Vue 2.0 来了! Weex 近 4 个月的开源之路 Weex 在 JS Runtime 内的多实例管理 我理解的 SPA 我理解的 Flux 架构 【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新 通过一张图走进 Vue 2.0 Code Review for Vue 2.0 Preview Vue 2.0 发布啦! 务实的小而美 Vue.js 1.0.0 发布了! [译]如何成为一名卓越的前端工程师 手机淘宝前端的图片相关工作流程梳理 [译]如何让办公室政治最小化 Vue.js 源码学习笔记 从原型到发布——“团队时间线” 1.0 开发心得 Vue + webpack 项目实践 用 Koa 写服务体验 webcomponents 笔记 之 配置管理 小秀个人的13~14年摄影作品 (共19张) 由今年D2前端论坛想到的 [译]CSS命名神马的真心难 [译]Git 分支的最佳实践 [译]撰写可测试的 JavaScript [译]语义化版本管理 [译]通过HTML5 Canvas API调节图像的亮度和颜色 [译]JavaScript V8性能小贴士 [译]视觉差,走起! [译]Chrome开发者工具中评估性能的五大新特性 精气神儿 细节无微不至,彩屏让人又爱又恨——新老“神机”大对决:Nokia 1050 vs Nokia 1202 秦升拿到红牌之后…… 用Sass重新整理自己的博客主题样式 Connect中间件使用手册 巧用 RequireJS Optimizer 给传统的前端项目打包 编辑器小调查结果 [译]JSLint 文档 烟火——写给蛇年的傲游和我 小秀个人的全年摄影作品 (共15张) 2012年终毫无正能量的总结 标签?ID?还是CLASS? 微创新=伪创新 HTML5峰会归来 分享bookmarklet一则:随意阅读 国际羽联和中国队之间的恶性循环 ZeroClipboard 学习笔记 “思考人生” 听杨东杰弹吉他 学习精髓 网站装修笔记20120426 网站装修笔记20120414 网站装修笔记20120406 分享Typecho插件:百度统计助手 我的得奖感言 网站装修笔记20120331 用CSS3制作尖角标签按钮样式 分享Typecho插件:Markdown 解析器 + 编辑器 分享Typecho皮肤:我的字很大 汇总自己过去的一些HTML5科普文章 html5中的消息通信简介 + 我的新网站开张 网站装修计划 Typed Arrays 是神马? 文明看球 HTML5中的文件处理 之 File API 独生子女、互相等和不耐烦 IndexedDB技术简介(四) IndexedDB技术简介(三) IndexedDB技术简介(二) IndexedDB技术简介(一) 把博客的字体进一步调大,同时去掉了侧边栏 “模仿别人是为了找到自己” 写给我未婚妻的2011年 写给自己的2011年 手把手教你入门EaselJS做HTML5动画 “吃了吧,不吃就浪费了” 写给傲游的2011年 所谓专业 写给HTML5的2011年 对HTML5中LocalStorage的一些使用建议 回味一下我2011年看到的最过瘾的5场足球比赛 浅浅浅谈开饭店被顾客吃出“异物”的用户体验 前端的本职 继续对Mac穷追猛打 之 修改原生按钮文字大小的技巧
HTML5中的文件处理 之 File Writer API
勾三股四 · 2012-03-07 · via 囧克斯

本文摘自 勾三股四 更早时期的 不老歌 博客。


这里是介绍HTML5文件处理的第二部分,之前已经介绍过了基础的FileAPI,接下来是如何通过JS创造文件的部分。我们称之为FileWriterAPI

需要提前解释的是,FileWriterAPI不是一个可以“独立”存在的规范,它强烈的依赖于FileAPI和即将介绍的FileSystemAPI。FileAPI是最基础的接口这毋庸置疑,而之所以先于FileSystemAPI介绍FileWriterAPI,是因为FileSystemAPI是一套更庞大的接口设计集合,FileWriterAPI相比之下相对简单,可以算作是FileSystemAPI也用得到的一部分基础,提前介绍给大家。

总览

这部分一共有三大接口:
* BlobBuilder接口:创建Blob
* FileSaver接口:提供一些列方法和事件监听方式,代表一个保存文件的过程
* FileWriter接口:是从FileSaver扩展来的,提供更丰富的输出选择

需要注意的是,FileSaverFileWriter是不能通过接口指定要保存或要写入的文件的,它们都是对象创建时就已经确定的并且不可更改。同时FileSaver更是不提供控制写入什么内容的接口,要写入的内容也是对象创建时就已经确定的并且不可更改的;而FileWriter可以通过接口控制要写入的内容。

接口描述

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

BlobBuilder接口

#BlobBuilder.getBlob([contentType]) // 返回目前已放入的所有Blob数据构成的对象
#BlobBuilder.append(text[, contentType]) // 放入文本数据
#BlobBuilder.append(data) // 放入数据(Blob或ArrayBugger)

FileSaver接口

#FileSaver.abort() // 中断保存操作
#FileSaver.readyState // 保存工作的状态(DONE、INIT、WRITING)
#FileSaver.error // 最后一次出错的错误信息
#FileSaver.onwritestart // 写入操作开始时触发
#FileSaver.onwrite // 写入操作成功时触发
#FileSaver.onwriteend // 写入操作完成时触发(不管成功还是失败)
#FileSaver.onprogress // 写入操作过程中触发
#FileSaver.onabort // 写入操作被中断时触发
#FileSaver.onerror // 写入操作失败时触发

FileWriter接口

#FileWriter.position // 当前写入操作所处的位置
#FileWriter.length // 文件长度(或在无权读取文件信息的情况下返回已写入的长度)
#FileWriter.write(blob) // 在position处写入blob数据
#FileWriter.seek(offset) // 设置position属性为offset
#FileWriter.truncate(size) // 在size处截断文件
#FileWriter.abort() // 继承自FileSaver
#FileWriter.readyState // 继承自FileSaver
#FileWriter.error // 继承自FileSaver
#FileWriter.onwritestart // 继承自FileSaver
#FileWriter.onwrite // 继承自FileSaver
#FileWriter.onwriteend // 继承自FileSaver
#FileWriter.onprogress // 继承自FileSaver
#FileWriter.onabort // 继承自FileSaver
#FileWriter.onerror // 继承自FileSaver

代码示例

举例一:创建Blob对象

var blobBuilder = new BlobBuilder(); // 创建BlobBuilder对象
blobBuilder.append("我今天只说三句话;"); // 连续放入文本
blobBuilder.append("包括这一句;");
blobBuilder.append("我的话完了。");

var url = window.URL.createObjectURL(blobBuilder.getBlob()); // 返回Blob对象并以此创建URL
window.open(url); // 通过URL打开这个Blob对象

举例二:使用FileWriter

fileEntry.createWriter(function (fileWriter) {
fileWriter.write(blobBuilder.getBlob()); // 返回Blob对象并通过fileWriter写入
fileWriter.onwriteend = function () {...}; // 绑定写入操作完成后的事件
});

这里需要注意的是:
1.在不同的浏览器下,BlobBuilderwindow.URL依然存在着不同的前缀,比如webkit下的接口分别为WebKitBlobBuilderwebkitURL
2.这里出现了一个陌生的对象fileEntry和陌生的方法createWriter,这正是接下来要介绍的一套比较复杂的API:FileSystemAPI的一部分内容。想弄清楚fileWriter具体运行的环境,还得继续学习,不过抛开外部环境的形成过程,fileWriter的用法应该可以体会到了;
3.FileSaver还没有用得到的地方,毕竟标准还没有最终形成,也许他将来某一天,借助其它规范的优势,摇身一变,就用在“另存为对话框”之类的地方了。

以上就是对FileWriterAPI的介绍,紧接着就是FileSystemAPI了,届时HTML5所有文件操作的神秘面纱都会被揭开。

(未完待续)