Cordova - 访问www目录下文件(获取www文件夹路径)
作者:hangge | 2016-05-31 09:20
我们使用Cordova开发时,会将html页面或着一些图片等资源文件放在 www 目录下。在程序中,如果我们想要获取到保存在 www 文件夹中的文件,方法如下。
(1)首先我们要添加 file 插件:
cordova plugin add cordova-plugin-file(2)程序安装后,www 文件夹会被打包到application文件夹下(iOS为例)。所以对于www里的文件,我们只能读取,不能编辑。
(3)通过 cordova.file.applicationDirectory 我们可以获取到application文件夹路径,那么获取www文件夹路径方式如下:
var wwwPath = cordova.file.applicationDirectory+"www"; alert(wwwPath);
![](http://hangge.com/blog_uploads/201605/201605171815518453.png)
2,上传www文件夹下的文件
比如我们要将 www/img/logo.png 这个图片上传到服务器:
function upload() { var fileURL = cordova.file.applicationDirectory+"www/img/logo.png"; var options = new FileUploadOptions(); options.fileKey = "file1"; options.fileName = fileURL.substr(fileURL.lastIndexOf('/') + 1); options.mimeType = "text/plain"; //上传参数 var params = {}; params.value1 = "test"; params.value2 = "param"; options.params = params; var ft = new FileTransfer(); //上传地址 var SERVER = "http://www.hangge.com/upload.php" ft.upload(fileURL, encodeURI(SERVER), success, fail, options); //上传成功 var success = function (r) { console.log("上传成功! Code = " + r.responseCode); } //上传失败 var fail = function (error) { alert("上传失败! Code = " + error.code); } }
3,复制www文件夹下的文件
比如我们要将 www/img/logo.png 这个图片复制到Documents目录下:
function copyFile(){ var fileURL = cordova.file.applicationDirectory+"www/img/logo.png"; window.resolveLocalFileSystemURL(fileURL, function(fileEntry) { window.resolveLocalFileSystemURL('cdvfile://localhost/persistent', function(dirEntry) { fileEntry.copyTo(dirEntry, fileEntry.name, successCallback, errorCallback); }, function(error){console.log("创建失败!")}); }, function(error){console.log("创建失败!")}); } //文件复制成功 function successCallback(fileEntry) { console.log("文件复制成功!新文件路径:" + fileEntry.toURL()); } //文件复制失败 function errorCallback() { console.log("文件复制失败!") }
4,页面中加载www文件夹下的文件
比如我们点击www/index.html页面上的加载按钮后,会把 www/img/logo.png 这个图片显示出来。
![](http://hangge.com/blog_uploads/201605/2016051718535848751.png)
通常我们是这么写路径的:
<!DOCTYPE html> <html> <head> <title>Capture Audio</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(){ var image1 = document.getElementById("image1"); image1.src = "./img/logo.png"; } </script> </head> <body style="padding-top:50px"> <button style="font-size:23px;" onclick="loadImage();">加载图片</button> <img id="image1" /> </body> </html>还可以这么写:
<!DOCTYPE html> <html> <head> <title>Capture Audio</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(){ var image1 = document.getElementById("image1"); image1.src = cordova.file.applicationDirectory+"www/img/logo.png"; } </script> </head> <body style="padding-top:50px"> <button style="font-size:23px;" onclick="loadImage();">加载图片</button> <img id="image1" /> </body> </html>
全部评论(0)