建站学 - 轻松建站从此开始!

建站学-个人建站指南,网页制作,网站设计,网站制作教程

当前位置: 建站学 > 网页设计 > html/xhtml >

HTML5中的文件处理 之 File Writer API

时间:2012-03-12 10:19来源: 作者: 点击:
  这里是介绍HTML5文件处理的第二部分,之前已经介绍过了基础的FileAPI,接下来是如何通过JS创造文件的部分。我们称之为FileWriterAPI。   需要提前解释的是,FileWriterAPI不是一个可以“独立”存在的规范,它强烈的依赖于FileAPI和即将介

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

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

  总览

  这部分一共有三大接口:

  * BlobBuilder接口:创建Blob

  * FileSaver接口:提供一些列方法和事件监听方式,代表一个保存文件的过程

  * FileWriter接口:是从FileSaver扩展来的,提供更丰富的输出选

  需要注意的是,FileSaver和FileWriter是不能通过接口指定要保存或要写入的文件的,它们都是对象创建时就已经确定的并且不可更改。 同时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对象并以此创建URLwindow.open(url); // 通过URL打开这个Blob对象

  举例二:使用FileWriter

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

  这里需要注意的是:

  1.在不同的浏览器下,BlobBuilder和window.URL依然存在着不同的前缀,比如webkit下的接口分别为WebKitBlobBuilder和webkitURL;

  2.这里出现了一个陌生的对象fileEntry和陌生的方法createWriter,这正是接下来要介绍的一套比较复杂的 API:FileSystemAPI的一部分内容。想弄清楚fileWriter具体运行的环境,还得继续学习,不过抛开外部环境的形成过 程,fileWriter的用法应该可以体会到了;

  3.FileSaver还没有用得到的地方,毕竟标准还没有最终形成,也许他将来某一天,借助其它规范的优势,摇身一变,就用在“另存为对话框”之类的地方了。

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

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片