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 设备震动整理

相关文章
相关标签/搜索