返回 导航

Cordova

hangge.com

Cordova - 访问www目录下文件（获取www文件夹路径）

作者：hangge | 2016-05-31 09:20
我们使用Cordova开发时，会将html页面或着一些图片等资源文件放在 www 目录下。在程序中，如果我们想要获取到保存在 www 文件夹中的文件，方法如下。

1，获取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);


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 这个图片显示出来。

通常我们是这么写路径的： 
<!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）

回到顶部