cordova打开文件_Cordova - file插件的使用详解（文件的创建、读写，文件夹创建等）...

最新推荐文章于 2024-05-09 17:20:02 发布

weixin_40001372

最新推荐文章于 2024-05-09 17:20:02 发布

阅读量1.2k

点赞数

文章标签： cordova打开文件

本文链接：https://blog.csdn.net/weixin_40001372/article/details/111818753

版权

本文详细介绍了如何使用Cordova的file插件在iOS和Android平台上进行文件和文件夹的操作，包括读写文件、设置保存路径、创建文件夹、二进制文件操作以及使用cdvfile协议。示例代码涵盖了文件的创建、读取、追加、下载、显示和复制等常见操作。

摘要由CSDN通过智能技术生成

Cordova 提供了一个 file 插件，通过这个插件我们很方便地实现在各种设备下对文件、和文件夹进行访问，编辑等各种操作。

一、添加File插件

首先我们要在“终端”中进入工程所在的目录，然后运行如下命令添加 file 插件：

cordova plugin add cordova-plugin-file

二、普通文件的读取与写入

1，文件写入(持久化保存)

在iOS中，下面代码会将文件写入到 Documents 目录(应用程序用户文档目录)下：

Capture Photo

//创建并写入文件

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("文件系统加载失败！")

}

创建并写入文件

可以看到 hangge.txt 文件创建成功，打开后里面内容也写入成功。

2，持久化文件保存路径设置：iOS平台

在 config.xml文件中，我们可以配置修改持久话化文件保存位置(Persistent storage location)。

如何不配置的话，从前面样例可以看到。默认是保存在程序的 Documents 文件目录下，也就是如下配置：

但保存在这里有个副作用，就是使用 iTunes 可以看到这些文件。如果要持久化保存很多文件，又不希望和普通用户文件混起来。我们可以修改成如下配置：

可以看到文件保存到应用的 Library 文件夹下了:

3，持久化文件保存路径设置：Android平台

同样的，我们也可以在 config.xml文件中配置修改 Android 设备中持久化文件保存位置(Persistent storage location)。

如果不配置，或者进行如下配置的话。持久化文件是保存在/data/data/下面。

修改成如下配置的话，如果设备有SD卡(或等效的存储分区)。那么持久性文件将被存储在该空间的根路径下。

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);

6，读取文件

下面将之前创建的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);

}, onErrorLoadFs);

}

//文件夹创建失败回调

function onErrorGetDir(error){

console.log("文件夹创建失败！")

}

//FileSystem加载失败回调

function onErrorLoadFs(error){

console.log("文件系统加载失败！")

}

四、二进制文件(binary file)操作

1，保存二进制文件

下面代码从网络上获取一张图片，并保存到本地。

Capture Photo

//下载图片

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("文件系统加载失败！")

}

下载图片

2，读取二进制文件

下面代码读取前面下载下来的图片(hangge.png)，并在 image 元素中显示。

Capture Photo

//加载图片

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("文件系统加载失败！")

}

加载图片

3，更便捷的显示图片办法

要将设备中的图片显示在页面上，前面的样例做法是先的到这个图片的 FileEntry 对象，然后读出出 Blob 数据，做最后将 Blob 数据通过window.URL.createObjectURL() 方法创建个url传递给页面的 img 元素 src。

其实还有更简单的办法，得到图片的 FileEntry 对象后，通过其 toURL() 方法即可将其 url 赋给 img 元素 src 属性即可。

下面同样以加载显示 Documents 目录下的 hangge.png 图片为例：

Capture Photo

//加载图片

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("文件系统加载失败！")

}

加载图片

五、使用cdvfile protocol 更快捷地定位到文件、文件夹

通过 cdvfile 协议，我们可以很方便的访问设备文件、文件夹。

cdvfile://localhost/persistent|temporary|another-fs-root*/path/to/file

1，在 html 页面中直接通过 cdvfile:// 路径来加载文件。

还是同上面样例一样，在页面上显示同一张图片：

2，复制文件

下面将 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 successCallback() {

console.log("文件复制成功！")

}

//文件复制失败

function errorCallback() {

console.log("文件复制失败！")

}