На сегодняшний день не так много настраиваемых файловых браузеров для Cordova. Например этот плагин доступен только для Android и, кажется, заблокирован в горизонтальной ориентации, хотя хорошо использовать сторонние библиотеки и плагины, иногда вы не можете найти что-то хорошее или это не соответствует вашим требованиям.
Замечания: ourcodeworld-Cordova-FileBrowser плагины создает собственный браузер файлов и папок только для андроида и это доступно на официальный репозиторий 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
}
Мы будем использовать resolLocalFileSystemURL для извлечения записи каталога и получения в массиве всего содержимого папки (включая папки и файлы).
2) Показывать контент на чем-то
Теперь наступает «трудная часть», визуализируйте записи так, как вы хотите!
Например, очень простой файловый браузер с тегом ul и простым кодом:
HTML
Javascript
/**
* 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'+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 при нажатии будут выполнять свои действия в соответствии с их типом, папкой или файлом.