HTML5中的文件处理之FileWriterAPI

这里是介绍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对象并以此创建URL 
  
  
  window.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所有文件操作的神秘面纱都会被揭开。

原文：http://bulaoge.net/topic.blg?dmn=g3g4&tid=2356045

文章名称：HTML5中的文件处理之FileWriterAPI
文章地址：http://www.shufengxianlan.com/qtweb/news44/58694.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容