基于chrome浏览器的FileSystem提供了文件夹和文

FileSystem提供了文件夹和文件的创建、移动、删除等操作，大大方便了数据的本地处理，而且所有的数据都是在沙盒(sandboxed)中，不同的web程序不能互相访问，这就保证了数据的完整和安全。
目前只有Chrome浏览器对FileSystem API支持，所以只能运行在Chrome浏览器中。
应用场景：

选中要上传的文件或目录后，系统会将文件复制到本地沙盒并批次上传。即使发生浏览器崩溃、网络中断等状况，也可在之后重新开始上传。

预先下载文件，需要用时无需等待。

通过创建目录来整理项目文件这一功能非常有用。 修改后的文件应可供客户端应用 [iTunes、Picasa] 访问。

下载网络文件本地存储，区别其他本地文件存储的是，本存储可管理。本地文件可通过二进制地址或者filesystem:协议访问，形成本地web网站。这正是我使用的功能。

如果开发功能开放给用户使用建议申请临时空间存储，如果自己使用可申请永久存储空间。因为申请永远存储需要用户同意才能执行。

//文件系统请求标识window.webkitRequestFileSystem用于兼容旧版chrome window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem; //接着向浏览器申请空间 window.requestFileSystem(window.TEMPORARY, //PERSISTENT(永久) or TEMPORARY(临时) 1024*1024, //1M initialize, //成功后的回调函数 errorHandler); //错误后的回调函数

但是我们不希望每次访问网页都去申请空间，可以先判断是否申请过空间来处理。完整代码：

window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem; var fileSystemObj = { fs : null,//文件系统对象 size : 52428800,//申请50M临时空间 50*1024*1024 errorHandler:function(e){ //处理各种错误 switch (e.name) { case 'QuotaExceededError': break; case 'NotFoundError': break; case 'SecurityError': break; case 'InvalidStateError': break; case 'InvalidModificationError': break; default: } }, initialize : function() { //初始化 window.requestFileSystem(TEMPORARY, this.size, function (fs) { fileSystemObj.fs = fs; }) } }; if(window.requestFileSystem) { navigator.webkitTemporaryStorage.queryUsageAndQuota(function (usage, quota) { //usage已经使用的空间，quota申请的总空间 if (!quota) { //还没有申请过空间 navigator.webkitTemporaryStorage.requestQuota(fileSystemObj.size, function (grantedBytes) { fileSystemObj.initialize(); }, fileSystemObj.errorHandler); }else{ fileSystemObj.initialize(); } }); } 3、创建文件

window.requestFileSystem(TEMPORARY, this.size, function (fs) { fileSystemObj.fs = fs; fs.root.getFile('log.txt', {create: true, exclusive: true}, function(fileEntry) { console.log(fileEntry);//留意它的几个属性 // 生成FileWriter对象 fileEntry.createWriter(function(fileWriter) { fileWriter.onwriteend = function(e) { console.log('写入完成'); }; fileWriter.onerror = function(e) { console.log('写入失败: ' + e.toString()); }; //可以创建ArrayBuffer、Blob等对象写入文件，但不建议使用BlobBuilder弃用方法 fileWriter.write(new Blob(["something"], {type: "text/plain"})); }, fileSystemObj.errorHandler); }, fileSystemObj.errorHandler); })

其中fs.root.getFile意思是在根目录下获取文件。create: true表示假如文件不存在就自动创建。而exclusive: true表示保证文件的唯一性，即假如文件存在时不继续执行后面的代码，立刻返回文件。 案例查看 createFile.html

getFile获取文件后可以使用FileReader对象读取文件内容。

fs.root.getFile('log.txt', {}, function(fileEntry) { fileEntry.file(function(file) { var reader = new FileReader(); reader.onloadend = function(e) { var txtArea = document.createElement('textarea'); txtArea.value = this.result; document.body.appendChild(txtArea); }; reader.readAsText(file); }, fileSystemObj.errorHandler); }, fileSystemObj.errorHandler);

案例查看readerFile.html

fs.root.getDirectory("abc", {create: true}, function(dirEntry) { //ok }, fileSystemObj.errorHandler);

getDirectory是获取文件夹函数，重点在于添加了{create: true}属性，当文件夹不存在时自动创建。 我们还可以通过修改函数达到创建"abc/aa/cc"这种套嵌式的文件夹。 案例查看readerFolder.html

经过以上几个操作，在浏览器的filesystem系统里已经存在一些文件夹和文件，下面我们来罗列根目录下的文件和文件夹。

//读取绝对地址方法 window.resolveLocalFileSystemURL=window.resolveLocalFileSystemURL||window.webkitResolveLocalFileSystemURL;

所谓绝对地址指的是filesystem:http://www.scscms.com/temporary形式的绝对地址。 当然我们也可以使用getDirectory方法获取相对本目录下的所有文件和文件夹。 案例查看listFile.html

修改文件与创建文件一样。只文档类型需要注意，同时默认保存为utf-8编码。写入模式重点需要注意。

复制文件有两种形式，一是用户选择硬盘的文件，另一种是filesystem复制filesystem里的文件。 第一种形式几乎可以理解是克隆，靠getFile,createWriter形式重建文件。而后者可使用moveTo、copyTo形式直接移动或者复制 FileEntry 和 DirectoryEntry 均可使用 copyTo() 复制现有条目。该方法会自动以递归方式复制文件夹。

function copy(cwd, src, dest) { cwd.getFile(src, {}, function(fileEntry) { cwd.getDirectory(dest, {}, function(dirEntry) { fileEntry.copyTo(dirEntry); }, errorHandler); }, errorHandler); } 9、删除文件

fileSystemObj.fs.root.getFile(file,{create: false}, function(fileEntry) { fileEntry.remove(function(){ //has been deleted }, fileSystemObj.errorHandler); }, fileSystemObj.errorHandler); 10、删除文件夹

fileSystemObj.fs.root.getDirectory("An absolute folder path",{}, function (dirEntry) { dirEntry.removeRecursively(function() { //has been deleted }, fileSystemObj.errorHandler); });

以递归方式删除目录。如果您不需要某个包含条目的目录，不妨使用 removeRecursively()。该方法将以递归方式删除目录及其内容。 以下代码会以递归方式删除“music”目录及其包含的所有文件和目录：

fileSystemObj.fs.root.getDirectory('/misc/xxx/music', {}, function(dirEntry) { dirEntry.removeRecursively(function() { console.log('Directory removed.'); }, fileSystemObj.errorHandler); }, fileSystemObj.errorHandler); 2、ajax下载文件

fileEntry.getMetadata(successCallback, opt_errorCallback); fileEntry.remove(successCallback, opt_errorCallback); fileEntry.moveTo(dirEntry, opt_newName, opt_successCallback, opt_errorCallback); fileEntry.copyTo(dirEntry, opt_newName, opt_successCallback, opt_errorCallback); fileEntry.getParent(successCallback, opt_errorCallback); fileEntry.toURL(opt_mimeType);

fileEntry.file(successCallback, opt_errorCallback); fileEntry.createWriter(successCallback, opt_errorCallback);