10分钟学会Cordova的文件系统编程

原文地址：http://www.misitang.com

10分钟学会Cordova的文件系统编程

本文系米斯唐老师独创，如有转载请留下网址http://www.misitang.com，不胜感激。

cordova提供了file插件，通过这个插件可以让我们访问手机上的大部份文件和文件夹，包括应用内部文件、SD卡上的文件等等，由于该插件与HTML5的文件操作方法结合到了一起，导致使用起来比较繁琐。下面我就来详细的讲述一下如何操作这些API。就我搜索的结果看，网上还没有这样详细，讲的这么透的文章。如何安装cordova，以及如何安装插件我就不赘述了，请大家参看cordova官网。

1. 读取文件

cordova是透过html5的API来进行文件操作的，所以需要读者具有一些HTML5的一些知识。在HTML5中，如果我们需要进行本地存储，需要使用requestFileSystem来申请一些临时或永久的空间，尤其是永久空间，在chrome中需要我们开启一个选项才可以操作本地文件（--allow-file-access-from-files），否则就会出现如下错误：

FileError {
	code: 2, 
	name: "SecurityError", 
	message: "It was determined that certain files are unsafe fo… too many calls are being made on file resources."
	}

以上是在浏览器中的问题，在cordova中都不会出现，我们可以顺利的使用这些API，完全没有问题。以下是代码：

window.resolveLocalFileSystemURL(cordova.file.externalRootDirectory,function(root){	
	root.getFile('demo.txt', {create:false}, function(fileEntry) {
	  fileEntry.file(function(file) {
		var reader = new FileReader();
		reader.onloadend = function(e) {
		  alert(this.result);
		};
		reader.readAsText(file);
	  }, function(err){console.log('读取出错');});
	}, function(err){console.log('找不到文件');});
},function(err){});

其中cordova.file.externalRootDirectory是cordova的预定义常量，表示的是SD卡根目录，这里使用FileReader来读取demo.txt文件的内容。唯一不爽的就是回调实在是太多，脑袋都被它给绕晕了。虽然cordova借用了HTML5的文件操作API来处理文件和文件夹，但它们的使用还是有很大的不同，尤其是cordova可以访问应用程序之外的本地空间，这对浏览器来说是不可想像的，所以还是要多看看cordova的文档，再多实验一下，自然就没问题了。

2.创建文件

创建文件很简单，上面的getFile方法的第二个参数是个object，其中的create属性如果为true，表示如果文件不存在则创建它。是不是太简单了。代码如下：

root.getFile('demo.txt', {create:false}, function(fileEntry) {
	//成功代码
},function(err){
	//错误代码
});

3.创建文件夹

文件夹的操作可以使用getDirectory方法，调用成功就会返回它的entry。它的第二个参数和getFile的含义相同，我们可以设置create:true，来创建不存在的文件夹。

root.getDirectory('my_folder', {create: true}, function(dirEntry) {
  alert('您创建了：' + dirEntry.name + ' 文件夹。');
}, function(err){
	console.log('创建文件夹出错');
});

4.在任意位置创建文件夹（或文件）

这可是米斯唐老师的独创呢，我在网上搜了N多的资料，也没找到这个内容，经过多次失败，终于理清了其中的脉络。在Cordova中，文件系统最重要的是要有一个（entry）入口，如果您想要在任意位置创建文件夹或文件，必须先获得上一层文件夹的entry，有一个API可以使用：window.resolveLocalFileSystemURL，这个API用于把本地文件URL转变为entry，而得到entry后，就可以调用html5的文件读写API了。从而解决问题，下面上代码：

window.resolveLocalFileSystemURL(cordova.file.externalRootDirectory,function(root){
	    root.getDirectory('demo', { create: true }, function (dirEntry) {
	        console.log('创建成功！')
	    }, function(err){
			console.log('创建失败');
	});
	},function(err){
		console.log('打开文件夹失败');
	});
//cordova.file.externalRootDirectory是cordova的文件位置常量，它表示SD卡根目录。其它目录常量请查询API文档。

5.检查文件或文件夹是否存在

查看HTML5的所有本地文件API，发现并没有这样的方法。但我们可以通过变通的方法来实现，我们可以调用resolveLocalFileSystemURL方法，如果文件夹存在，则此方法肯定能成功，将会调用success回调，如果文件夹不存在，则会调用error回调，从而变相的达到了我们的目标。判断文件是否存在也可以用类似的方法，可以打开文件夹后，再getFile一下。下面是测试代码：

window.resolveLocalFileSystemURL(cordova.file.externalRootDirectory+'demo/',function(root){
	console.log('文件夹存在');
},function(err){
	console.log('文件夹不存');
});

6.删除文件

在cordova中删除一个文件也是件挺麻烦的事，首先要先取得父文件夹的entry，然后通过这个entry调用getFile方法，如果调用成功，就可以调用remove方法把文件删除掉了。尤其是Javascript中，这些操作都需要回调完成，我们真正的陷入了回调大坑（当然，您也可以自己封装一个删除文件的插件，也就没现在这么麻烦了，不过做插件也是件麻烦事，用html5的文件API也是件很酷的事，难道不是吗？）。请看代码：

window.resolveLocalFileSystemURL(cordova.file.externalRootDirectory+'demo/',function(root){
	root.getFile('demo.txt',{create:false},function(fentry){
		fentry.remove(function() {
			console.log('删除成功');
			},function(err){
			console.log('删除失败')
			});
		},function(err){console.log('删除文件出错');});
},function(err){
	console.log('文件夹不存');
});

7.总结

总的来说，cordova操作文件并不很难，主要还是相关的介绍文章太少，官网的API说明也讲的不明不白，会让人走很多的弯路。在我看来，关键的函数是resolveLocalFileSystemURL，有了这个方法，我们才可以访问外部文件和文件夹，因为这会把一个PATH转变成entry,而entry是操作文件和文件夹的关键。