cordova-plugin-file 文件操作整理（二）

Cordove File实例Demo

一、cordova.file获取系统目录

[javascript]  view plain  copy

1. //当前程序的目录  
2. console.info(cordova.file.applicationDirectory);  
3. //程序的数据目录  
4. console.info(cordova.file.applicationStorageDirectory);  
5. //程序的数据目录  
6. console.info(cordova.file.dataDirectory);  
7. //程序的暂存目录  
8. console.info(cordova.file.cacheDirectory);  
9.   
10. //Android扩展存储应用目录  
11. console.info(cordova.file.externalApplicationStorageDirectory);  
12. //Android扩展存储数据目录  
13. console.info(cordova.file.externalDataDirectory);  
14. //Android扩展存储缓存目录  
15. console.info(cordova.file.externalCacheDirectory);  
16. //Android扩展根目录  
17. console.info(cordova.file.tempDirectory);  
18.   
19. /**iOS中的目录**/  
20. //临时目录  
21. console.info(cordova.file.tempDirectory);  
22. //云存储目录  
23. console.info(cordova.file.syncedDataDirectory);  
24. //文档目录  
25. console.info(cordova.file.documentsDirectory);  
26. //共享目录  
27. console.info(cordova.file.sharedDirectory);  

Android下目录输出

[html]  view plain  copy

1. //file:///android_asset/  
2. //file:///data/data/io.cordova.myapp84ea27/  
3. //file:///data/data/io.cordova.myapp84ea27/files/  
4. //file:///data/data/io.cordova.myapp84ea27/cache/  
5. //file:///storage/emulated/0/Android/data/io.cordova.myapp84ea27/  
6. //file:///storage/emulated/0/Android/data/io.cordova.myapp84ea27/files/  
7. //file:///storage/emulated/0/Android/data/io.cordova.myapp84ea27/cache/  

二、沙盒模式下直接操作

window.requestFileSystem(type, size, successCB,errorCB),请求获取配额，在插件中不需要使用requestquota

1.创建文件

[javascript]  view plain  copy

1. //创建文件  
2. window.requestFileSystem(LocalFileSystem.PERSISTENT, 1024 * 1024, function (fs) {  
3.     console.log('file system open:' + fs.name);  
4.     console.info(fs);  
5.     fs.root.getFile('test1.txt', {  
6.         create: true,  
7.         exclusive: false  
8.     }, function (fileEntity) {  
9.         console.info(fileEntity);  
10.         console.log('文件地址：' + fileEntity.toURL()); //file:///data/data/io.cordova.myapp84ea27/files/files/test1.txt  
11.         // fileEntry.name == 'someFile.txt'  
12.         // fileEntry.fullPath == '/someFile.txt'  
13.         writeFile(fileEntity, "中文内容");  
14.     });  
15. });  

2.写入文件

[javascript]  view plain  copy

1. //写入文件  
2. function writeFile(fileEntry, dataObj) {  
3.     fileEntry.createWriter(function (fileWriter) {  
4.         //写入结束  
5.         fileWriter.onwriteend = function () {  
6.             console.log('写入文件成功');  
7.             //读取内容  
8.             readFile(fileEntry);  
9.         }  
10.         fileWriter.onerror = function (e) {  
11.             console.log('写入文件失败:' + e.toString());  
12.         }  
13.         if (!dataObj) {  
14.             dataObj = new Blob(['some file data'], { type: 'text/plain' });  
15.         }  
16.         fileWriter.write(dataObj);  
17.     });  
18. }  

3.读取文件

[javascript]  view plain  copy

1. //读取文件内容  
2. function readFile(fileEntry) {  
3.     fileEntry.file(function (file) {  
4.         var reader = new FileReader();  
5.         reader.onloadend = function () {  
6.             console.log('读取文件成功：' + reader.result);  
7.             //显示文件  
8.             console.info(fileEntry.fullPath);  
9.         }  
10.         reader.readAsText(file);  
11.     }, function (err) {  
12.         console.info('读取文件失败');  
13.     });  
14. }  

4.下载图片，并显示

下载：

[javascript]  view plain  copy

1. window.requestFileSystem(window.PERSISTENT, 5 * 1024 * 1024, function (fs) {  
2.     getSampleFile(fs.root);  
3. }, errorHandle)  
4. function getSampleFile(dirEntry) {  
5.     console.info(dirEntry);  
6.     //1.请求png 图片  
7.     var xhr = new XMLHttpRequest();  
8.     xhr.open('GET', 'http://cordova.apache.org/static/img/cordova_bot.png', true);  
9.     xhr.responseType = 'blob';  
10.     xhr.onload = function () {  
11.         if (this.status == 200) {  
12.             var blob = new Blob([this.response], { type: 'image/png' });  
13.             //保存  
14.             saveFile(dirEntry, blob, 'downloadImage.png');  
15.         }  
16.     }  
17.     xhr.send();  
18. }  

保存：

[javascript]  view plain  copy

1. //保存到本地  
2. function saveFile(dirEntry, blob, filename) {  
3.     console.info(blob);  
4.     //创建文件  
5.     dirEntry.getFile(filename, { create: true }, function (fileEntry) {  
6.         fileEntry.createWriter(function (fileWriter) {  
7.             fileWriter.onwriteend = function () {  
8.                 console.log('写入文件成功');  
9.                 if (blob.type == 'image/png') {  
10.                     readBinaryFile(fileEntry);  
11.                 } else {  
12.                     console.error(blob);  
13.                 }  
14.             }  
15.             fileWriter.onerror = function (err) {  
16.                 console.error('写入文件失败：' + err.toString());  
17.             }  
18.             fileWriter.write(blob);  
19.         });  
20.     }, errorHandle);  
21. }  

读取、显示：fileEntry.toURL() 可以直接作为src显示。

[javascript]  view plain  copy

1. //读取二进制文件  
2. function readBinaryFile(fileEntry) {  
3.     fileEntry.file(function (file) {  
4.         var reader = new FileReader();  
5.         reader.onloadend = function () {  
6.             //显示图片文件  
7.             console.info(fileEntry.fullPath + ':' + reader.result);  
8.             var blob = new Blob([new Uint8Array(reader.result)], { type: 'image/png' });  
9.             $scope.imgOne = window.URL.createObjectURL(blob);  
10.             $scope.$apply();  
11.         }  
12.         reader.readAsArrayBuffer(file);  
13.     }, errorHandle);  
14.     //直接显示图片  
15.     $scope.imgTwo = fileEntry.toURL();  
16.     $scope.$apply();  
17. }  

5.读取文件夹中内容：

[javascript]  view plain  copy

1. //显示根目录内容  
2. window.requestFileSystem(LocalFileSystem.PERSISTENT, 1024 * 1024, function (fs) {  
3.     //显示根目录下的内容  
4.     var dirReader = fs.root.createReader();  
5.     var entries = [];  
6.     var readEntries = function () {  
7.         //DirectoryReader.readEntries() 方法一次读取内容的个数不一定  
8.         //返回FileEntry数组  
9.         dirReader.readEntries(function (results) {  
10.             if (!results.length) {  
11.                 showEntries(entries.sort());  
12.             } else {  
13.                 entries = entries.concat(toArray(results));  
14.                 readEntries();  
15.             }  
16.         }, errorHandler);  
17.     }  
18.     readEntries();  
19. });  
20. function errorHandler(err) {  
21.     console.info(err);  
22. }  
23. function toArray(list) {  
24.     return Array.prototype.slice.call(list || [], 0);  
25. }  
26. //显示读取结果  
27. function showEntries(entries) {  
28.     console.info(entries);  
29. }  

更多：

cordova-plugin-file 文件操作整理（一）

Apache Cordova开发环境搭建（二）VS Code

cordova-plugin-vibration 设备震动整理