介绍
使用文件系统处理API可以操作设备的文件系统、文件夹及文件。
安装
cordova plugin add cordova-plugin-file
使用方法
这个插件定义了全局的cordova.file对象
虽然定义在全局中,但是需要使用deviceready事件之后
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
console.log(cordova.file);
}
方法
window.requestFileSystem()
window.resolveLocalFileSystemURL()
window.requestFileSystem()
其中各个参数的含义如下所示:
Type:文件系统的类型,可选值为LocalFileSystem.TEMPORARY或 LocalFileSystem.PERSISTENT,前者是临时文件,后者是持久性文件。
Size:应用要请求的存储大小,以字节为单位。
successCallback:成功的回调函数,返回的参数是FileSystem对象。
errorCallback:失败的回调函数,返回的参数是FileError对象。
window.resolveLocalFileSystemURL()
其中 各个参数的含义如下所示:url:在文件系统中的一个本地文件的URL
successCallback:成功的回调
errorCallback:失败的回调
示例一:创建一个临时txt文件,写入文本内容,并上传
创建一个临时txt文件,写入文本内容后,到手机存储中查看
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<title>Hello World</title>
<style>
.line{
padding: 10px;
}
</style>
</head>
<body>
<div class="app">
<h1>File plugin</h1>
<div class="line"><button id="btn">按钮</button></div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
index.js:
// 创建一个txt文件,并写入数据入文件
var app = {
// Application Constructor
initialize: function() {
document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
},
// deviceready Event Handler
onDeviceReady: function() {
this.receivedEvent();
},
// Update DOM on a Received Event
receivedEvent: function() {
var _this = this;
var btn = document.getElementById("btn");
btn.onclick = function(){
// 调用file插件
_this.requestFileSystem();
}
},
// file插件
requestFileSystem: function(){
var _this = this;
// 获取fs对象
window.requestFileSystem(LocalFileSystem.TEMPORARY, 0, function (fs) {
console.log('file system open: ' + fs.name); //temporary
// 创建txt文件,返回fileEntry对象
fs.root.getFile("log.txt", { create: true, exclusive: false }, function (fileEntry) {
console.log(fileEntry)
var dataObj = "运行日志";
writeFile(fileEntry, dataObj);
}, onErrorCreateFile);
}, function(err){
console.log(err)
});
function onErrorCreateFile(e){
console.log(e)
}
/*
* 写入内容到txt文件
* param {object} fileEntry对象
* param {object} dataObj数据对象
*/
function writeFile(fileEntry, dataObj) {
// Create a FileWriter object for our FileEntry (log.txt).
fileEntry.createWriter(function (fileWriter) {
fileWriter.onwriteend = function(e) {
alert("成功创建log文件,并写入数据");
console.log(e);
};
fileWriter.onerror = function(e) {
console.log("Failed file write: " + e.toString());
};
fileWriter.write(dataObj);
});
}
}
};
app.initialize();
运行:
点击“按钮”,弹窗显示成功创建log文件
弹窗后输出内容:
我们根据文件路径,查看是否创建了log.txt文件
但是打开/data路径后,却没找到文件
续上:
在config文件内,添加这句代码,再次启动应用
config.xml:
<preference name="AndroidPersistentFileLocation"value="Compatibility"/>
运行:
点击按钮后,输出如下内容:
和上面输出的fileEntry内容,文件的路径有所不同。
根据这个文件路径的,查看文件管理器,查看是否创建了log.txt文件
找到如下路径:/sdcard/Android/data/com.abc.www/cache
其中com.abc.www是对应你应用的包名
找到了log.txt文件
打开文件,显示出所写入文件的内容
分析:
为什么加入这句代码后<preference name="AndroidPersistentFileLocation"value="Compatibility"/>,所储存的路径发生了改变?
这是因为没有使用的话,系统会默认使用如下配置
<preference name="AndroidPersistentFileLocation" value="Internal" />
文件则会保存在 /data/user/0/ 中,用户通过文件管理器查找文件,是查看不到的。不管你使用的是临时存储还是持久化存储。
而使用此配置
<preference name="AndroidPersistentFileLocation" value="Compatibility" />
那么文件就会存储到/storage/emulated/0/ 中,用户通过文件管理器查找文件,是可以查看的。不管你使用的是临时存储还是持久化存储。
备注:
把临时文件LocalFileSystem.TEMPORARY改成永久文件LocalFileSystem.PERSISTENT 的话,就会保存到/sdcard路径上
续上:将写入内容的文件上传到服务器
需要安装file-transfer插件
index.js:
// 创建一个txt文件,并写入数据入文件
var app = {
// Application Constructor
initialize: function() {
document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
},
// deviceready Event Handler
onDeviceReady: function() {
this.receivedEvent();
},
// Update DOM on a Received Event
receivedEvent: function() {
var _this = this;
var btn = document.getElementById("btn");
btn.onclick = function(){
// 调用file插件
_this.requestFileSystem();
}
},
// file插件
requestFileSystem: function(){
var _this = this;
// 获取fs对象
window.requestFileSystem(LocalFileSystem.TEMPORARY, 0, function (fs) {
console.log('file system open: ' + fs.name);
// 创建txt文件,返回fileEntry对象
fs.root.getFile("log.txt", { create: true, exclusive: false }, function (fileEntry) {
console.log(fileEntry)
var dataObj = "运行日志";
writeFile(fileEntry, dataObj);
}, onErrorCreateFile);
}, function(err){
console.log(err)
});
function onErrorCreateFile(e){
console.log(e)
}
/*
* 写入内容到txt文件
* param {object} fileEntry对象
* param {object} dataObj数据对象
*/
function writeFile(fileEntry, dataObj) {
// Create a FileWriter object for our FileEntry (log.txt).
fileEntry.createWriter(function (fileWriter) {
fileWriter.onwriteend = function(e) {
console.log("成功创建log文件,并写入数据");
console.log(e);
// 上传文件
uploadFile(fileEntry);
};
fileWriter.onerror = function(e) {
console.log("Failed file write: " + e.toString());
};
fileWriter.write(dataObj);
});
}
function uploadFile (fileEntry) {
var fileURL = fileEntry.toURL();
// 成功的回调
var win = function (r) {
alert("Code = " + r.responseCode);
}
// 失败的回调
var fail = function (error) {
alert("An error has occurred: Code = " + error.code);
}
// options配置项
var options = new FileUploadOptions();
options.fileKey = "file"; // fileKey
options.fileName = fileURL.substr(fileURL.lastIndexOf('/') + 1); // fileName
options.mimeType = "text/plain"; // mimeType
var params = {};
params.value1 = "test";
params.value2 = "param";
options.params = params; // params
// 初始化FileTransfer对象
var ft = new FileTransfer();
// 调用upload方法
ft.upload(fileURL, encodeURI("http://10.1.10.53:8089/oss/UploadServlet"), win, fail, options);
}
}
};
app.initialize();
运行:
读取写入到手机存储中txt文件,上传文件到服务器
打开服务器,可以看到我们上传的文件
示例二:创建文件夹
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<title>Hello World</title>
<style>
.line{
padding: 10px;
}
</style>
</head>
<body>
<div class="app">
<h1>File plugin</h1>
<div class="line"><button id="btn">按钮</button></div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
index.js:
var app = {
// Application Constructor
initialize: function() {
document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
},
// deviceready Event Handler
onDeviceReady: function() {
this.receivedEvent();
},
// Update DOM on a Received Event
receivedEvent: function() {
var _this = this;
var btn = document.getElementById("btn");
btn.onclick = function(){
_this.createAndWriteFile();
}
},
// file插件,创建目录
createAndWriteFile: function(){
//临时数据保存
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fs) {
console.log('打开的文件系统: ' + fs.name);
fs.root.getDirectory('MichaelOuyang', { create: true }, function (dirEntry) {
console.log(dirEntry);
dirEntry.getDirectory('images', { create: true }, function (subDirEntry) {
alert("创建的文件夹成功");
console.log(subDirEntry);
}, onErrorGetDir);
}, onErrorGetDir);
}, onErrorLoadFs);
//文件夹创建失败回调
function onErrorGetDir(error){
console.log("文件夹创建失败!")
}
//FileSystem加载失败回调
function onErrorLoadFs(error){
console.log("文件系统加载失败!")
}
}
};
app.initialize();
config.xml:
<preference name="AndroidPersistentFileLocation" value="Compatibility"/>
运行:
弹窗显示创建文件夹成功
打开文件管理器,可以查看到我们的创建文件在/sdcard中