cordova file插件

来源：互联网发布：vb调用ffmpeg 编辑：程序博客网时间：2024/06/05 18:53

介绍

使用文件系统处理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"/>，所储存的路径发生了改变？

这是因为没有使用的话，系统会默认使用如下配置

文件则会保存在 /data/user/0/ 中，用户通过文件管理器查找文件，是查看不到的。不管你使用的是临时存储还是持久化存储。

而使用此配置

那么文件就会存储到/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中

阅读全文

0 0