Cordova - file插件的使用详解（文件的创建、读写，文件夹创建等）
来源：互联网 发布：淘宝怎么搜索发票 编辑：程序博客网 时间：2024/06/06 16:38
Cordova 提供了一个 file 插件，通过这个插件我们很方便地实现在各种设备下对文件、和文件夹进行访问，编辑等各种操作。
一、添加File插件
首先我们要在“终端”中进入工程所在的目录，然后运行如下命令添加 file 插件：
二、普通文件的读取与写入
2，持久化文件保存路径设置：iOS平台
在 config.xml 文件中，我们可以配置修改持久话化文件保存位置（Persistent storage location）。
如何不配置的话，从前面样例可以看到。默认是保存在程序的 Documents 文件目录下，也就是如下配置：
但保存在这里有个副作用，就是使用 iTunes 可以看到这些文件。如果要持久化保存很多文件，又不希望和普通用户文件混起来。我们可以修改成如下配置：
6，读取文件
下面将之前创建的 hangge.txt 文件中的内容读取出来，并显示。
下面 readFile() 方法接收传入的 FileEntry 对象，并读取对象内容。
三、文件夹操作
四、二进制文件（binary file）操作1，保存二进制文件
2，读取二进制文件
下面代码读取前面下载下来的图片（hangge.png），并在 image 元素中显示。
3，更便捷的显示图片办法
要将设备中的图片显示在页面上，前面的样例做法是先的到这个图片的 FileEntry 对象，然后读出出 Blob 数据，做最后将 Blob 数据通过 window.URL.createObjectURL() 方法创建个url传递给页面的 img 元素 src。
其实还有更简单的办法，得到图片的 FileEntry 对象后，通过其 toURL() 方法即可将其 url 赋给 img 元素 src 属性即可。
五、使用cdvfile protocol 更快捷地定位到文件、文件夹
2，复制文件
下面将 Documents 目录下的 hangge.png 复制到 tmp 目录下，并改名为 temp.png
原文出自：www.hangge.com 原文链接：http://www.hangge.com/blog/cache/detail_1179.html
一、添加File插件
首先我们要在“终端”中进入工程所在的目录，然后运行如下命令添加 file 插件：
1
cordova plugin add cordova-plugin-file二、普通文件的读取与写入
1，文件写入（持久化保存）
在iOS中，下面代码会将文件写入到 Documents 目录（应用程序用户文档目录）下：
在iOS中，下面代码会将文件写入到 Documents 目录（应用程序用户文档目录）下：
<!DOCTYPE html><html> <head> <title>Capture Photo</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <script type="text/javascript" charset="utf-8" src="cordova.js"></script> <script type="text/javascript" charset="utf-8"> //创建并写入文件 function createAndWriteFile(){ //持久化数据保存 window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fs) { console.log('打开的文件系统: ' + fs.name); fs.root.getFile("hangge.txt", { create: true, exclusive: false }, function (fileEntry) { console.log("是否是个文件？" + fileEntry.isFile.toString()); // fileEntry.name == 'hangge.txt' // fileEntry.fullPath == '/hangge.txt' //文件内容 var dataObj = new Blob(['欢迎访问hangge.com'], { type: 'text/plain' }); //写入文件 writeFile(fileEntry, null); }, onErrorCreateFile); }, onErrorLoadFs); } //将内容数据写入到文件中 function writeFile(fileEntry, dataObj) { //创建一个写入对象 fileEntry.createWriter(function (fileWriter) { //文件写入成功 fileWriter.onwriteend = function() { console.log("Successful file read..."); }; //文件写入失败 fileWriter.onerror = function (e) { console.log("Failed file read: " + e.toString()); }; //写入文件 fileWriter.write(dataObj); }); } //文件创建失败回调 function onErrorCreateFile(error){ console.log("文件创建失败！") } //FileSystem加载失败回调 function onErrorLoadFs(error){ console.log("文件系统加载失败！") } </script> </head> <body style="padding-top:50px"> <button style="font-size:23px;" onclick="createAndWriteFile();">创建并写入文件</button> </body></html>可以看到 hangge.txt 文件创建成功，打开后里面内容也写入成功。
2，持久化文件保存路径设置：iOS平台
在 config.xml 文件中，我们可以配置修改持久话化文件保存位置（Persistent storage location）。
如何不配置的话，从前面样例可以看到。默认是保存在程序的 Documents 文件目录下，也就是如下配置：
<preference name="iosPersistentFileLocation" value="Compatibility" />
但保存在这里有个副作用，就是使用 iTunes 可以看到这些文件。如果要持久化保存很多文件，又不希望和普通用户文件混起来。我们可以修改成如下配置：
<preference name="iosPersistentFileLocation" value="Library" />
可以看到文件保存到应用的 Library 文件夹下了:
3，持久化文件保存路径设置：Android平台
同样的，我们也可以在 config.xml 文件中配置修改 Android 设备中持久化文件保存位置（Persistent storage location）。
同样的，我们也可以在 config.xml 文件中配置修改 Android 设备中持久化文件保存位置（Persistent storage location）。
如果不配置，或者进行如下配置的话。持久化文件是保存在 /data/data/<packageId> 下面。
<preference name="AndroidPersistentFileLocation" value="Internal" />
修改成如下配置的话，如果设备有SD卡（或等效的存储分区）。那么持久性文件将被存储在该空间的根路径下。
<preference name="AndroidPersistentFileLocation" value="Compatibility" />
4，创建临时文件（将文件写入到临时文件夹下）
在iOS系统中，下面代码会将文件写入到 tmp 目录下。当系统空间不足或是资源不足的时候，临时文件会被系统删除。同上面的样例相比，这里只改了一个地方（高亮处）。
//创建并写入文件function createAndWriteFile(){ //临时数据保存 window.requestFileSystem(LocalFileSystem.TEMPORARY, 5 * 1024 * 1024, function (fs) { console.log('打开的文件系统: ' + fs.name); fs.root.getFile("hangge.txt", { create: true, exclusive: false }, function (fileEntry) { console.log("是否是个文件？" + fileEntry.isFile.toString()); // fileEntry.name == 'hangge.txt' // fileEntry.fullPath == '/hangge.txt' //文件内容 var dataObj = new Blob(['欢迎访问hangge.com'], { type: 'text/plain' }); //写入文件 writeFile(fileEntry, dataObj); }, onErrorCreateFile); }, onErrorLoadFs);}5，文件末尾写入新内容下面改造下 writeFile() 方法，增加一个 isAppend 参数。用来表示数据写入是完全覆盖，还是追加（append）到末尾。//将内容数据写入到文件中（支持追加内容）function writeFile(fileEntry, dataObj, isAppend) { //创建一个写入对象 fileEntry.createWriter(function (fileWriter) { //文件写入成功 fileWriter.onwriteend = function() { console.log("Successful file read..."); }; //文件写入失败 fileWriter.onerror = function (e) { console.log("Failed file read: " + e.toString()); }; //如果是最加内容，则定位到文件尾部 if (isAppend) { try { fileWriter.seek(fileWriter.length); } catch (e) { console.log("file doesn't exist!"); } } fileWriter.write(dataObj); });}使用方式如下：
var dataObj = new Blob(['\n值得您每天来看看！'], { type: 'text/plain' });writeFile(fileEntry, dataObj, true);下面将之前创建的 hangge.txt 文件中的内容读取出来，并显示。
下面 readFile() 方法接收传入的 FileEntry 对象，并读取对象内容。
//读取文件function readFile(fileEntry) { fileEntry.file(function (file) { var reader = new FileReader(); reader.onloadend = function() { alert(this.result); }; reader.readAsText(file); }, onErrorReadFile);} //读取文件失败响应function onErrorReadFile(){ console.log("文件读取失败!");}下面代码在 Documents 目录（应用程序用户文档目录）下创建子文件夹：assets/images
//创建并写入文件function createAndWriteFile(){ //临时数据保存 window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fs) { console.log('打开的文件系统: ' + fs.name); fs.root.getDirectory('assets', { create: true }, function (dirEntry) { dirEntry.getDirectory('images', { create: true }, function (subDirEntry) { //createFile(subDirEntry, "hangge.txt"); }, onErrorGetDir); }, onErrorGetDir); }, onErrorLoadFs);} //文件夹创建失败回调function onErrorGetDir(error){ console.log("文件夹创建失败！")} //FileSystem加载失败回调function onErrorLoadFs(error){ console.log("文件系统加载失败！")}四、二进制文件（binary file）操作
下面代码从网络上获取一张图片，并保存到本地。
<!DOCTYPE html>
<html> <head> <title>Capture Photo</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <script type="text/javascript" charset="utf-8" src="cordova.js"></script> <script type="text/javascript" charset="utf-8"> //下载图片 function downloadImage(){ window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fs) { console.log('打开的文件系统: ' + fs.name); getSampleFile(fs.root); }, onErrorLoadFs); } //获取图片 function getSampleFile(dirEntry) { var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://www.hangge.com/blog/images/logo.png', true); xhr.responseType = 'blob'; xhr.onload = function() { if (this.status == 200) { var blob = new Blob([this.response], { type: 'image/png' }); saveFile(dirEntry, blob, "hangge.png"); } }; xhr.send(); } //保存图片文件 function saveFile(dirEntry, fileData, fileName) { dirEntry.getFile(fileName, { create: true, exclusive: false }, function (fileEntry) { writeFile(fileEntry, fileData); }, onErrorCreateFile); } //将图片数据写入到文件中 function writeFile(fileEntry, dataObj, isAppend) { //创建一个写入对象 fileEntry.createWriter(function (fileWriter) { //文件写入成功 fileWriter.onwriteend = function() { console.log("Successful file write..."); if (dataObj.type == "image/png") { readBinaryFile(fileEntry); } else { readFile(fileEntry); } }; //文件写入失败 fileWriter.onerror = function(e) { console.log("Failed file write: " + e.toString()); }; //写入文件 fileWriter.write(dataObj); }); } //文件创建失败回调 function onErrorCreateFile(error){ console.log("文件创建失败！") } //FileSystem加载失败回调 function onErrorLoadFs(error){ console.log("文件系统加载失败！") } </script> </head> <body style="padding-top:50px"> <button style="font-size:23px;" onclick="downloadImage();">下载图片</button> </body></html>2，读取二进制文件
下面代码读取前面下载下来的图片（hangge.png），并在 image 元素中显示。
<!DOCTYPE html><html> <head> <title>Capture Photo</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <script type="text/javascript" charset="utf-8" src="cordova.js"></script> <script type="text/javascript" charset="utf-8"> //加载图片 function loadImage(){ window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fs) { console.log('打开的文件系统: ' + fs.name); fs.root.getFile("hangge.png", { create: true, exclusive: false }, function (fileEntry) { readBinaryFile(fileEntry); }, onErrorCreateFile); }, onErrorLoadFs); } //读取图片文件 function readBinaryFile(fileEntry) { fileEntry.file(function (file) { var reader = new FileReader(); reader.onloadend = function() { //加载成功显示图片 var blob = new Blob([new Uint8Array(this.result)], { type: "image/png" }); displayImage(blob); }; reader.readAsArrayBuffer(file); }, onErrorReadFile); } //显示图片 function displayImage(blob) { var elem = document.getElementById('imageFile'); elem.src = window.URL.createObjectURL(blob); } //文件创建失败回调 function onErrorCreateFile(error){ console.log("文件创建失败！") } //读取文件失败响应 function onErrorReadFile(){ console.log("文件读取失败!"); } //FileSystem加载失败回调 function onErrorLoadFs(error){ console.log("文件系统加载失败！") } </script> </head> <body style="padding-top:50px"> <button style="font-size:23px;" onclick="loadImage();">加载图片</button> <image id="imageFile"/> </body></html>3，更便捷的显示图片办法
要将设备中的图片显示在页面上，前面的样例做法是先的到这个图片的 FileEntry 对象，然后读出出 Blob 数据，做最后将 Blob 数据通过 window.URL.createObjectURL() 方法创建个url传递给页面的 img 元素 src。
其实还有更简单的办法，得到图片的 FileEntry 对象后，通过其 toURL() 方法即可将其 url 赋给 img 元素 src 属性即可。
下面同样以加载显示 Documents 目录下的 hangge.png 图片为例：
<!DOCTYPE html>
<html> <head> <title>Capture Photo</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <script type="text/javascript" charset="utf-8" src="cordova.js"></script> <script type="text/javascript" charset="utf-8"> //加载图片 function loadImage(){ window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fs) { console.log('打开的文件系统: ' + fs.name); fs.root.getFile("hangge.png", { create: true, exclusive: false }, function (fileEntry) { displayImageByFileURL(fileEntry); }, onErrorCreateFile); }, onErrorLoadFs); } //显示图片 function displayImageByFileURL(fileEntry) { var elem = document.getElementById('imageFile'); elem.src = fileEntry.toURL(); } //文件创建失败回调 function onErrorCreateFile(error){ console.log("文件创建失败！") } //FileSystem加载失败回调 function onErrorLoadFs(error){ console.log("文件系统加载失败！") } </script> </head> <body style="padding-top:50px"> <button style="font-size:23px;" onclick="loadImage();">加载图片</button> <img id="imageFile"/> </body></html>五、使用cdvfile protocol 更快捷地定位到文件、文件夹
通过 cdvfile 协议，我们可以很方便的访问设备文件、文件夹。
cdvfile://localhost/persistent|temporary|another-fs-root*/path/to/file
1，在 html 页面中直接通过 cdvfile:// 路径来加载文件。
还是同上面样例一样，在页面上显示同一张图片：
<img src="cdvfile://localhost/persistent/hangge.png" />
下面将 Documents 目录下的 hangge.png 复制到 tmp 目录下，并改名为 temp.png
这里通过 FileTransfer 对象的 copyTo() 方法进行复制，如果想要实现移动的话则改成 moveTo() 方法即可。
function copyFile(){ window.resolveLocalFileSystemURL('cdvfile://localhost/persistent/hangge.png', function(fileEntry) { window.resolveLocalFileSystemURL('cdvfile://localhost/temporary', function(dirEntry) { fileEntry.copyTo(dirEntry, "temp.png", successCallback, errorCallback); }, function(error){console.log("创建失败！")}); }, function(error){console.log("创建失败！")});} //文件复制成功function successCallback() { console.log("文件复制成功！")} //文件复制失败function errorCallback() { console.log("文件复制失败！")} 0 0
- Cordova - file插件的使用详解（文件的创建、读写，文件夹创建等）
- Cordova - file插件的使用详解（文件的创建、读写，文件夹创建等）
- 文件夹 文件的创建 读写
- File类的使用创建及删除文件，文件夹
- java File类创建文件夹与创建文件的区别
- 使用plugman 创建一个自己的cordova插件
- Cordova实现文件创建和读写操作（支持Android和IOS等）
- cordova自定义插件的创建过程
- Cordova(Phonegap)在iOS端App的使用（二）---插件的创建
- file文件创建等
- open 创建文件并读写的错误--bad file descriptor
- node.js文件的复制，创建文件夹等相关操作
- java 创建文件夹，读写文件
- 使用File.Create等一句代码创建文件的注意一点
- Cordova - fileTransfer插件的使用详解（实现文件上传、下载）
- Java读写文件创建文件夹多种方法示例详解
- android读写文件的实现（针对android4.4不能在sdcard根目录下创建文件夹）
- VC 快速创建多层文件夹&文件的创建、打开、读写、操作
- 数据结构期末总结
- 资源地址 记录一下
- Elasticsearch与Solr 选型
- 数据结构期末总结
- 读《Web全栈工程师的自我修养》
- Cordova - file插件的使用详解（文件的创建、读写，文件夹创建等）
- 第十六周项目1-（8）验证算法基数排序
- iOS Swift3.0地图自定义标注和气泡
- android 使用Path实现涂鸦效果
- 世纪大战：Tab VS Space
- ios一个简单的自定义密码输入框，alert样式和sheet样式
- python 生成条形码
- 【第16周项目1-堆排序】
- MediaCodec编译pcm为aac
