HTML5 本地文件操作之FileSystemAPI简介

一、FileSystemAPI简介

HTML5的文件操作Api中

1.FileAPI，用于基础的客户端本地文件读取，目前大多数接口已经被主流浏览器支持，点击查看更多参考

2.FileSystemAPI，网络应用可以创建、读取、导航用户本地文件系统中的沙盒部分以及向其中写入数据。

API如下：

文件操作：File/Blob,FileList,FileReader,FileWriter

目录文件系统访问：DirectoryReader，FileEntry/DirectoryEntry,FileSystem,LocalFileSystem

二、浏览器支持与存储限制

1.当前测试时只有Google浏览器支持也就是webkit内核

Opera仅支持FileAPI  IE不支持   Safari不支持   Firefox仅支持FileAPI   Chrome/Chromium浏览器支持。

2.应用在进行文件操作时，必须先请求系统上存储数据配额，尤其针对PERSISTENT持久存储需要用户点击确认，如果用户拒绝文件访问失败

不过，可使用--unlimited-quota-for-files标记运行Chrome浏览器进行测试。此外，如果您要开发的是用于Chrome网上应用店的应用或扩展程序，可使用unlimitedStorage清单文件权限，而无需请求配额。最后，用户会收到授予、拒绝或为应用增加存储的权限对话框。

如果您要通过 file://调试您的应用，可能需要--allow-file-access-from-files标记。不使用这些标记会导致SECURITY_ERR或QUOTA_EXCEEDED_ERRFileError。(此问题，当时测试没起作用。)

3.FileSystem 规范还定义了计划用于WebWorkers的同步API(LocalFileSystemSync)接口。不过，测试Demo中不涉及该同步API。

三、请求文件系统

网络应用可通过调用window.requestFileSystem()请求对沙盒文件系统的访问权限：

window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
window.requestFileSystem(window.TEMPORARY, 5 * 1024, initFs, errorHandler);

参数说明：

1.type：文件存储是否应该是持久的。可能的值包括window.TEMPORARY、window.PERSISTENT

console.info(window.TEMPORARY);  //0  临时
console.info(window.PERSISTENT); //1  持久

通过TEMPORARY存储的数据可由浏览器自行决定删除（例如在需要更多空间的情况下）。要清除PERSISTENT存储，必须获得用户或应用的明确授权，并且需要用户向您的应用授予配额。请参阅请求配额。

2.size:引用需要用于存储的大小（单位：字节）。

3.successCallback：文件系统请求成功时回调。参数为FileSystem对象

3.errorCallback:用于处理错误或过去文件系统请求被拒绝的可选回调。参数为FileError对象（测试时，还不是这个对象，只有返回异常的文本内容）。

如果您是首次调用requestFileSystem()，系统会为您的应用创建新的存储。请注意，这是沙箱文件系统，也就是说，一个网络应用无法访问另一个应用的文件。这也意味着您无法在用户硬盘上的任意文件夹（例如“我的图片”、“我的文档”等）中读/写文件。

用法示例1，请求临时存储

window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
window.requestFileSystem(window.TEMPORARY, 5 * 1024, initFs, errorHandler);
function initFs(fs) {
    //fs为FileSystem对象
}
function errorHandler(err) {
    console.info('创建文件失败');
    console.info(err);
}

用法示例2，请求持久存储：

求存储配额要使用 PERSISTENT 存储，您必须向用户取得存储持久数据的许可。由于浏览器可自行决定删除临时存储的数据，因此这一限制不适用于 TEMPORARY 存储。
为了将 PERSISTENT 存储与 FileSystem API 配合使用，Chrome 浏览器使用基于 window.webkitStorageInfo 的新 API 以请求存储

//如果使用持久存储，需要使用requestQuota
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
//当前请求存储空间，如果不修改大小的话，只需要请求一次就可以了
window.webkitStorageInfo.requestQuota(window.PERSISTENT, 1024 * 1024 * 5, function (gratedBytes) {
    console.log('请求成功的空间：' + gratedBytes);
    window.requestFileSystem(window.PERSISTENT, gratedBytes, initFs, errorHandler);
}, errorHandler);

function initFs(fs) {
    //
}
function errorHandler(err) {
    console.error(err);
    //console.info(typeof FileError);//FileError 目前不可用或已经放弃
    console.info('创建文件是失败');
}

用户授予许可后，就不必再调用 requestQuota() 了。如果修改了请求配额大小，会再次弹出提示框，提示用户授权。
后续调用为无操作指令。您还可以使用 API 查询源的当前配额使用情况和分配情况：window.webkitStorageInfo.queryUsageAndQuota()使用文件沙盒环境中的文件通过 FileEntry 接口表示。
FileEntry 包含标准文件系统中会有的属性类型（name、isFile...）和方法（remove、moveTo、copyTo...）

更多整理：

 

参考文章：

http://www.cnblogs.com/zhwl/p/3201975.html

http://blog.csdn.net/qq_27626333/article/details/51823120