MUI-APP開發之mui框架封裝獲取檔案方式
阿新 • • 發佈：2019-02-19
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="../css/mui.min.css" rel="stylesheet" /> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">檔案查詢</h1> </header> </head> <body> <div class="mui-content"> <ul id="list" class="mui-table-view mui-table-view-chevron"></ul> </div> <script src="../js/mui.min.js"></script> <script src="../js/njs-io.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var nowFileType; var subRoot = null; var lockOadWebview = null; mui.init({ /*preloadPages: [{ id: 'lock-oadUpdate.html', url: 'lock-oadUpdate.html' }]*/ }); mui.plusReady(function() { var self = plus.webview.currentWebview(); nowFileType = self.fileType; console.log("filepath:" + self.filepath); init(self.filepath); var sdRoot = getSDRoot(); /*var location = "Download"; init(sdRoot + "/" + location);*/ //點選事件 mui('.mui-table-view').on('tap', 'li', function() { var name = this.getAttribute('name'); var fileType = this.getAttribute('data-type'); var filepath = subRoot + '/' + name; console.log("檔案路徑-->" + filepath); console.log("檔名稱-->" + name); if(fileType === 'Folder') { mui.openWindow({ url: 'file-query.html', id: 'file-query.html', createNew: true, extras: { filepath: filepath, fileType:nowFileType } }) } else { //檔案 if(name.indexOf(".bin") != -1) { console.log("這是bin檔案"); if(name.indexOf("_"+nowFileType) == -1){ mui.alert("請使用 "+nowFileType +" 型別檔案進行升級操作"); return; } if(!lockOadWebview) { lockOadWebview = plus.webview.getWebviewById("lock-oadUpdate.html"); } mui.fire(lockOadWebview, "oadInfa", { fileName: name, filePath: filepath }) //跳轉不了 /*mui.openWindow({ url: 'lock-oadUpdate.html', id: 'lock-oadUpdate.html' });*/ mui.back(); } } }) }) function init(filePath) { // 獲得sd卡根目錄 document.querySelector('.mui-title').innerHTML = filePath; var File = plus.android.importClass("java.io.File"); subRoot = new File(filePath); // 遍歷sd卡根目錄下的所有檔案和資料夾 var files = plus.android.invoke(subRoot, "listFiles"); var len = files.length; var list = document.getElementById("list"); var fragmentFolder = document.createDocumentFragment(); var fragmentFile = document.createDocumentFragment(); var li; for(var i = 0; i < len; i++) { var file = files[i]; // 過濾隱藏檔案 if(!plus.android.invoke(file, "isHidden")) { var name = plus.android.invoke(file, "getName"); li = document.createElement('li'); li.className = 'mui-table-view-cell mui-media'; li.setAttribute('name', name); // 判斷是檔案還是資料夾 if(plus.android.invoke(file, "isDirectory")) { // 設定標誌為資料夾，供後面使用 li.setAttribute('data-type', 'Folder'); // 讀取資料夾下子資料夾及子檔案數目 var obj = readSonFilenum(file); li.innerHTML = '<a class="mui-navigate-right">' + '<img class="mui-media-object mui-pull-left" src="../img/folder.png">' + '<div class="mui-media-body">' + name + '<p class="mui-ellipsis">資料夾數量：' + obj.subFolderNum + ' 檔案數量：' + obj.subFileNum + '</p></div></a>'; fragmentFolder.appendChild(li); } else { li.setAttribute('data-type', 'File'); // 讀檔案大小 var fileSizeString = readFileSize(file); li.innerHTML = '<a class="mui-navigate-right">' + '<img class="mui-media-object mui-pull-left" src="../img/file.png">' + '<div class="mui-media-body mui-ellipsis">' + name + '<p class="mui-ellipsis">' + fileSizeString + '</p></div></a>'; fragmentFile.appendChild(li); } }; } list.appendChild(fragmentFolder); list.appendChild(fragmentFile); } </script> </body> </html>
其中njs-io.js檔案如下所示
/** * 獲得sd卡根目錄 */ function getSDRoot(){ // 匯入android.os.Environment類物件 var environment = plus.android.importClass("android.os.Environment"); // 判斷SD卡是否插入 if(environment.getExternalStorageState() !== environment.MEDIA_MOUNTED){ plus.nativeUI.toast('沒有找到SD卡'); return; } console.log("獲取 Android 資料目錄:"+environment.getDataDirectory()); console.log("獲取 Android 下載/快取內容目錄:"+environment.getDownloadCacheDirectory()); console.log("獲取外部儲存目錄即 SDCard:"+environment.getExternalStorageDirectory()); console.log("獲取外部儲存裝置的當前狀態:"+environment.getExternalStorageState()); //console.log("獲取 Android 的根目錄:"+getRootDirectory()); return environment.getExternalStorageDirectory(); } /** * 建立資料夾 * @param {Object} path */ function creatFolder(path){ var File = plus.android.importClass("java.io.File"); var fd = new File(path); if(!fd.exists()){ fd.mkdirs(); plus.nativeUI.toast("建立成功"); } } /** * 刪除檔案(資料夾) * @param {Object} path */ function deleteFile(path){ var File = plus.android.importClass("java.io.File"); var fd = new File(path); if (fd != null && fd.exists()){ fd.delete(); plus.nativeUI.toast("刪除成功"); } } /** * 讀檔案大小 * @param {Object} file */ function readFileSize(file){ var FileInputStream = plus.android.importClass("java.io.FileInputStream"); var fileSize = new FileInputStream(file); var size = fileSize.available(); var fileSizeString; if(size == 0){ fileSizeString = "0B"; }else if(size < 1024){ fileSizeString = size + "B"; }else if(size < 1048576){ fileSizeString = (size/1024).toFixed(2) + "KB"; }else if (size < 1073741824){ fileSizeString = (size/1048576).toFixed(2) + "MB"; }else{ fileSizeString = (size/1073741824).toFixed(2) + "GB"; } return fileSizeString; } /** * 讀取資料夾下子資料夾及子檔案數目 * @param {Object} file */ function readSonFilenum(file){ var subFile = plus.android.invoke(file,"listFiles"); var subLen = subFile.length; var obj = { subFolderNum: 0, subFileNum: 0 }; for(var k=0;k<subLen;k++){ if(!plus.android.invoke(subFile[k],"isHidden")){ if(plus.android.invoke(subFile[k],"isDirectory")){ obj.subFolderNum++; }else{ obj.subFileNum++; } } } return obj; }