使用 HTML5 File API 实现客户端 log（1）简介

look_w

HTML5 File API 简介在 HTML 5 里，从 Web 网页上访问本地文件系统变的十分的简单，那就是使用 File API。                        这个 File 规范说明里提供了一个 API 来表现 Web 应用里的文件对象，您可以通过编程来选择它们，访问它们的信息。File API 有以下几部分 JavaScript 类组成：

• 读取、操作文件的类：File/Blob, FileList, FileReader
• 创建、写入文件的类：BlobBuilder, FileWriter
• 目录、文件系统访问的类：DirectoryReader, FileEntry/DirectoryEntry,LocalFileSystem

规范里定义了两种类型的 API：异步和同步。一般情况下应该使用异步 API，这样可以防止调用 API 的时候阻塞 UI 进程。同步 API 只可以在  上下文中使用，关于 Web Worker 的资料，可以在文章最后的参考链接中找到。                        使用同步版本的 API 不需要指定回调函数，所有的方法将通过返回值返回方法调用的结果。在本文中将主要使用同步 API，原因有以下两点：

• 需要保证用户调用 HTML5 Log 方法之前，HTML File API 已经初始化完毕
• 需要保证 log 信息写入的顺序

HTML5 规范可以参考 W3C 。                         HTML5 File API 规范可以参考 W3C 上的。                         HTML5 File API: Directories and System 规范可以参考 W3C 上的。                         HTML5 File API: Writer 规范可以参考 W3C 上的。                       
File API JavaScript 类接口定义介绍本文中主要使用了同步版本的 FileEntry、FileWriter 和 DirectoryEntry 类。
清单 1. FileEntrySync 接口定义

1 2 3 4 5

[NoInterfaceObject] interface FileEntrySync:EntrySync {    FileWriterSync createWriter() raises (FileException);// 创建 FileWriter，用来写内容到文件    File  file() raises (FileException);// 返回代表当前 File 状态的实例 };

清单 2. FileWriterSync 接口定义

1 2 3 4 5 6 7 8

[NoInterfaceObject] interface FileWriterSync {    readonly attribute unsigned long long position;// 下一次要写入内容的位置    readonly attribute unsigned long long length;// 文件的长度    void write (Blob data) raises (FileException);// 写入内容到文件    void seek (long long offset) raises (FileException);// 设置下一次要写入内容的位置    void truncate (unsigned long long size) raises (FileException);// 改变文件长度到指定大小 };

清单 3. DirectoryEntrySync 接口定义

1 2 3 4 5 6 7 8 9 10 11

[NoInterfaceObject] interface DirectoryEntrySync:EntrySync {    DirectoryReaderSync createReader () raises (FileException);// 创建 Reader 遍历目录中的文件     // 根据文件路径，得到目录中文件    FileEntrySync  getFile (DOMString path,         optional Flags options) raises (FileException);     // 创建或者获取子目录    DirectoryEntrySync getDirectory (DOMString path,         optional Flags options) raises (FileException);    void removeRecursively () raises (FileException);// 删除目录以及这个目录下面的所有内容 };

浏览器对 File API 支持情况表 1. File APIIEFirefoxChromeSafariOperaiOS SafariAndroid Browser6.0( × )3.6~7.0( 支持部分 API)6.0~12.0( 支持部分 API)3.1~3.2( × )10.5~11.0( × )3.2( × )2.1( × )7.0( × )8.0( 支持部分 API)13.0( √ )4.0( × )11.1( 支持部分 API)4.0~4.1( × )2.2,2.3( × )8.0( × )9.0( 支持部分 API)14.0( √ )5.0( × )11.5( 支持部分 API)4.2~4.3( × )3.0( 支持部分 API)9.0( × )10.0( 支持部分 API)15.0( √ )5.1( 支持部分 API)11.6( 支持部分 API)5.0( × )4.0( 支持部分 API)10.0( 支持部分 API)11.0( 支持部分 API)16.0( √ )5.2( 支持部分 API)12.0( 支持部分 API)


12.0~13.0( 支持部分 API)17.0~20.0( √ )




浏览器对 File API 支持的更详细信息可以参考网站 。