Cordove File實例Demo

一、cordova.file獲取系統目錄

//當前程序的目錄console.info(cordova.file.applicationDirectory);//程序的數據目錄console.info(cordova.file.applicationStorageDirectory);//程序的數據目錄console.info(cordova.file.dataDirectory);//程序的暫存目錄console.info(cordova.file.cacheDirectory);//Android擴展存儲應用目錄console.info(cordova.file.externalApplicationStorageDirectory);//Android擴展存儲數據目錄console.info(cordova.file.externalDataDirectory);//Android擴展存儲緩存目錄console.info(cordova.file.externalCacheDirectory);//Android擴展根目錄console.info(cordova.file.tempDirectory);/**iOS中的目錄**///臨時目錄console.info(cordova.file.tempDirectory);//云存儲目錄console.info(cordova.file.syncedDataDirectory);//文檔目錄console.info(cordova.file.documentsDirectory);//共享目錄console.info(cordova.file.sharedDirectory);Android下目錄輸出
//file:///android_asset///file:///data/data/io.cordova.myapp84ea27///file:///data/data/io.cordova.myapp84ea27/files///file:///data/data/io.cordova.myapp84ea27/cache///file:///storage/emulated/0/Android/data/io.cordova.myapp84ea27///file:///storage/emulated/0/Android/data/io.cordova.myapp84ea27/files///file:///storage/emulated/0/Android/data/io.cordova.myapp84ea27/cache/
二、沙盒模式下直接操作
window.requestFileSystem(type, size, successCB,errorCB),請求獲取配額，在插件中不需要使用requestquota
1.創建文件
//創建文件window.requestFileSystem(LocalFileSystem.PERSISTENT, 1024 * 1024, function (fs) {    console.log('file system open:' + fs.name);    console.info(fs);    fs.root.getFile('test1.txt', {        create: true,        exclusive: false    }, function (fileEntity) {        console.info(fileEntity);        console.log('文件地址：' + fileEntity.toURL()); //file:///data/data/io.cordova.myapp84ea27/files/files/test1.txt        // fileEntry.name == 'someFile.txt'        // fileEntry.fullPath == '/someFile.txt'        writeFile(fileEntity, "中文內容");    });});
2.寫入文件
//寫入文件function writeFile(fileEntry, dataObj) {    fileEntry.createWriter(function (fileWriter) {        //寫入結束        fileWriter.onwriteend = function () {            console.log('寫入文件成功');            //讀取內容            readFile(fileEntry);        }        fileWriter.onerror = function (e) {            console.log('寫入文件失敗:' + e.toString());        }        if (!dataObj) {            dataObj = new Blob(['some file data'], { type: 'text/plain' });        }        fileWriter.write(dataObj);    });}
3.讀取文件
//讀取文件內容function readFile(fileEntry) {    fileEntry.file(function (file) {        var reader = new FileReader();        reader.onloadend = function () {            console.log('讀取文件成功：' + reader.result);            //顯示文件            console.info(fileEntry.fullPath);        }        reader.readAsText(file);    }, function (err) {        console.info('讀取文件失敗');    });}
4.下載圖片，并顯示
下載：
window.requestFileSystem(window.PERSISTENT, 5 * 1024 * 1024, function (fs) {    getSampleFile(fs.root);}, errorHandle)function getSampleFile(dirEntry) {    console.info(dirEntry);    //1.請求png 圖片    var xhr = new xmlHttPRequest();    xhr.open('GET', 'http://cordova.apache.org/static/img/cordova_bot.png', true);    xhr.responseType = 'blob';    xhr.onload = function () {        if (this.status == 200) {            var blob = new Blob([this.response], { type: 'image/png' });            //保存            saveFile(dirEntry, blob, 'downloadImage.png');        }    }    xhr.send();}
保存：
//保存到本地function saveFile(dirEntry, blob, filename) {    console.info(blob);    //創建文件    dirEntry.getFile(filename, { create: true }, function (fileEntry) {        fileEntry.createWriter(function (fileWriter) {            fileWriter.onwriteend = function () {                console.log('寫入文件成功');                if (blob.type == 'image/png') {                    readBinaryFile(fileEntry);                } else {                    console.error(blob);                }            }            fileWriter.onerror = function (err) {                console.error('寫入文件失?。? + err.toString());            }            fileWriter.write(blob);        });    }, errorHandle);}
讀取、顯示：fileEntry.toURL() 可以直接作為src顯示。
//讀取二進制文件function readBinaryFile(fileEntry) {    fileEntry.file(function (file) {        var reader = new FileReader();        reader.onloadend = function () {            //顯示圖片文件            console.info(fileEntry.fullPath + ':' + reader.result);            var blob = new Blob([new Uint8Array(reader.result)], { type: 'image/png' });            $scope.imgOne = window.URL.createObjectURL(blob);            $scope.$apply();        }        reader.readAsArrayBuffer(file);    }, errorHandle);    //直接顯示圖片    $scope.imgTwo = fileEntry.toURL();    $scope.$apply();}
5.讀取文件夾中內容：
//顯示根目錄內容window.requestFileSystem(LocalFileSystem.PERSISTENT, 1024 * 1024, function (fs) {    //顯示根目錄下的內容    var dirReader = fs.root.createReader();    var entries = [];    var readEntries = function () {        //DirectoryReader.readEntries() 方法一次讀取內容的個數不一定        //返回FileEntry數組        dirReader.readEntries(function (results) {            if (!results.length) {                showEntries(entries.sort());            } else {                entries = entries.concat(toArray(results));                readEntries();            }        }, errorHandler);    }    readEntries();});function errorHandler(err) {    console.info(err);}function toArray(list) {    return Array.prototype.slice.call(list || [], 0);}//顯示讀取結果function showEntries(entries) {    console.info(entries);}
更多：
cordova-plugin-file 文件操作整理（一）
Apache Cordova開發環境搭建（二）VS Code
cordova-plugin-vibration 設備震動整理