在Ionic中实现获取给定路径下所有文件的名称

前段时间有个功能需求,就是从电脑往手机某个文件夹拷贝一堆文件后,Ionic能把这些文件名称获取到一个数组里。而通过ngCordova的File插件虽然可以很方便地获取设备的文件和目录,并实现常见的操作,但获取并操作文件的前提是必须提供文件名称,所以只通过它是不行的。经过各种尝试,终于实现了这个功能。思路是ngCordova的File插件提供路径,HTML5 FileSystemDirectoryReader.readEntries()提供方法。

File插件

首先,在Cmd窗口中输入ionic start listfilesdemo blank回车,新建一个名为listfilesdemo的Ionic空白项目。

然后,输入cd your-app-name回车,进入到Ionic项目根目录。开始安装ngCordova,输入bower install ngCordova回车,然后在listfilesdemo\www\index.htmlcordova.js前面引入相应的js文件:

<script src="lib/ngCordova/dist/ng-cordova.js"></script>

接下来,在listfilesdemo\www\js\app.js中将ngCordova模块添加到
angular.module

angular.module('starter', ['ionic', 'ngCordova'])

然后,在Cmd窗口中输入cordova plugin add cordova-plugin-file回车,安装File插件。

HTML

listfilesdemo\www\index.html<body></body>标签替换如下:

<body ng-app="starter" ng-controller="filesCtrl">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
<button class="button" ng-click="synchroniseFilelist()">同步</button>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item ng-repeat="file in filelist" item="item">
{{ file.name }}
</ion-item>
</ion-list>
</ion-content>
</ion-pane>
</body>

ng-controller指令定义了AngularJS控制器filesCtrl。头部右侧有个按钮,点击执行函数synchroniseFilelist(),实现列表与手机给定文件夹内文件名称的同步。下面有个列表,将文件名一行行地呈现出来。

控制器

listfilesdemo\www\js\下新建controllers.js文件,写入:

angular.module('starter.controllers', ['ionic'])
.controller('filesCtrl', function ($scope, $cordovaFile) {
console.log('filesCtrl');
console.log('Please test the Demo on devices');
$scope.filelist = [{"name": "biebu.xin"}];
$scope.synchroniseFilelist = function() {
window.resolveLocalFileSystemURL(cordova.file.externalRootDirectory + "test/", function(dirEntry) {
var directoryReader = dirEntry.createReader();
directoryReader.readEntries(function(entries) {
var newfilelist = new Array(entries.length);
for (var i = 0; i < entries.length; i++) {
newfilelist[i] = {};
newfilelist[i].name = entries[i].name;
// alert(newfilelist[i].name);
}
// alert(JSON.stringify(newfilelist));
$scope.filelist = newfilelist;
}, function(error) {
alert("Failed to list directory files: " + error.code);
});
});
};
});

cordova.file.externalRootDirectory是指手机外部存储的根目录,在手机上看是/storage/emulated/0/,在电脑上看是计算机\your-device-name\Phone\。注意,这个外部存储并不是扩展的TF卡,还是在手机内部,可简单理解为能被电脑访问的手机自身存储。

读取给定目录的内容时,先创建DirectoryReader,然后调用readEntries()方法。entries是个数组,每个数组元素的name属性就是文件或文件夹名称。

注意,将controllers.js文件链接到index.html

<script src="js/controllers.js"></script>

还要将控制器模块添加到listfilesdemo\www\js\app.jsangular.module

angular.module('starter', ['ionic', 'ngCordova', 'starter.controllers'])

测试

输入ionic platform add android回车,添加安卓平台。连接手机后,输入ionic run android回车,让App在手机上运行。在电脑上建一个包含一些文件的文件夹test,并拷贝到计算机\your-device-name\Phone\下。如果前面没问题的话,点击『同步』按钮,就可以看到效果了。