到目前为止, 还没有太多可定制的文件浏览器。例如, 此插件仅适用于android, 并且似乎已锁定为横向使用, 尽管很好地使用了第三方库和插件, 但有时你找不到很好的东西或无法满足你的要求。

注意：ourcodeworld-cordova-filebrowser插件仅为android创建本机文件和文件夹浏览器, 可在此处的官方Github存储库中使用。

由于多种因素, 例如兼容性, 自定义性和其他因素, 文件浏览器插件的想法似乎很复杂, 因此强烈建议为你的项目创建自己的文件选择器或浏览器！并使用正确的插件是一项容易完成的任务。

我们在项目中需要cordova文件插件, 实现自定义文件浏览器很重要, 你可以使用以下命令下载：

$ cordova plugin add cordova-plugin-file

现在一切都应该变成小菜一碟了！

1)检索文件夹的所有内容

首先, 我们需要了解基本代码的工作方式(记住所有代码都应在” onDeviceReady”事件上执行)：

var myPath = cordova.file.externalRootDirectory; // We can use the default externalRootDirectory or use a path : file://my/custom/folder

window.resolveLocalFileSystemURL(myPath, function (dirEntry) {

var directoryReader = dirEntry.createReader();

directoryReader.readEntries(onSuccessCallback, onFailCallback);

});

function onSuccessCallback(entries){

// The magic will happen here, check out entries with :

// console.log(entries);

}

function onFailCallback(){

// In case of error

}

我们将使用resolveLocalFileSystemURL检索目录项, 并在数组中获取文件夹的所有内容(包括文件夹和文件)。

2)在某物上显示内容

现在出现”困难的部分”, 以你想要的方式呈现条目！

例如, 使用ul标签和简单代码制作的非常简单的文件浏览器：

的HTML

Java脚本

/**

* This function will draw the given path.

*/

function listPath(myPath){

window.resolveLocalFileSystemURL(myPath, function (dirEntry) {

var directoryReader = dirEntry.createReader();

directoryReader.readEntries(onSuccessCallback, onFailCallback);

});

function onSuccessCallback(entries){

for (i=0; i

var row = entries[i];

var html = '';

if(row.isDirectory){

// We will draw the content of the clicked folder

html = '

'+row.name+'';

}else{

// alert the path of file

html = '

'+row.name+'';

}

}

document.getElementById("select-demo").innerHTML = html;

}

function onFailCallback(e){

console.error(e);

// In case of error

}

}

function getFilepath(thefilepath){

alert(thefilepath);

}

当我们调用函数listPath(” file：// storage / 0″);该文件夹的所有内容将在UL元素中呈现。嵌套的LI元素, 单击后将根据其类型, 文件夹或文件执行其操作。