介绍
使用文件系统处理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中
2006
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
