cordova filetransfer插件——上传、下载文件

最新推荐文章于 2024-04-21 09:53:14 发布

michael_ouyang

最新推荐文章于 2024-04-21 09:53:14 发布

阅读量2.7w

点赞数

分类专栏： cordova 文章标签： cordova plugin webapp fileTransfer

本文链接：https://blog.csdn.net/michael_ouyang/article/details/75305119

版权

cordova 专栏收录该内容

21 篇文章 5 订阅

订阅专栏

介绍

FileTransfer对象提供给了一种将文件上传到服务器的方法，可以通过HTTP和HTTPS进行请求，可以传递一个由FileUploadOptions对象设定的可选参数给upload方法。上传成功后，系统会调用成功回调函数并传递一个FileUploadResult对象。如果出现错误，那么系统会调用错误回调函数并传递一个FileTransferError对象。

安装

cordova plugin add cordova-plugin-file-transfer

支持的平台

· Amazon Fire OS

· Android

· BlackBerry 10

· Browser

· Firefox OS**

· iOS

· Windows Phone 7 and 8*

· Windows

使用方法

这个插件定义了全局的FileTransfer，FileUploadOptions 构造函数。虽然在全局范围内，但是他们需要在deviceready事件之后才可用

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    console.log(FileTransfer);
}

属性

onprogress：使用調用 `ProgressEvent`每当一个新的数据块传输。（函数）

方法

upload：将文件发送到服务器。

download：从服务器下载一个文档。

abort: 中止正在进行的传输。

示例

示例一：上传图片

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: 5px;
        }
        #myImage {
            height: 200px;
        }
    </style>
</head>
<body>
<div class="app">
    <div class="line"><button id="openLabrary">按钮</button></div>
    <div class="line"><img id="myImage"></img></div>
    <div class="line"><span id="text"></span></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 = {
    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    },
    onDeviceReady: function() {
        this.receivedEvent();
    },
    $$: function(id) {
        return document.getElementById(id);
    },
    receivedEvent: function(){
        var getDomLabrary = this.$$('openLabrary');
        var _this = this;
        getDomLabrary.onclick = function(){
            // 打开图片库
            navigator.camera.getPicture(onSuccess, onFail, {
                quality: 50,                                            // 相片质量是50
                sourceType : Camera.PictureSourceType.SAVEDPHOTOALBUM,  // 设置从图片库获取
                destinationType: Camera.DestinationType.FILE_URI        // 以文件路径返回
            });
            function onSuccess(imageURI) {
                console.log(imageURI)
                _this.$$('myImage').src = imageURI;

                // 上传
                _this.upload(imageURI);
            }
            function onFail(message) {
                alert('Failed because: ' + message);
            }
        }
    },
    //使用FileTransfer插件，上传文件
  upload(fileURL) {
    //上传成功
    var success = function (r) {
      alert("上传成功! Code = " + r.responseCode);
    }
    //上传失败
    var fail = function (error) {
      alert("上传失败! Code = " + error.code);
    }
 
    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://10.1.10.53:8089/oss/UploadServlet"
    ft.upload(fileURL, encodeURI(SERVER), success, fail, options);
  }
};

app.initialize();

运行：

点击按钮，打开图片库，选择图片，显示

上传成功

备注：

这个上传的服务器路径：

var SERVER = "http://10.1.10.53:8089/oss/UploadServlet"

使用了一个.jsp文件写成的

示例二：下载图片

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: 5px;
        }
        #myImage {
            height: 200px;
        }
    </style>
</head>
<body>
<div class="app">
    <div class="line"><button id="download">下载</button></div>
    <div class="line"><img id="myImage"></img></div>
    <div class="line"><span id="text"></span></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();
    },
    // get DOM
   $$: function(id) {
      return document.getElementById(id);
   },
    receivedEvent:function() {
        var _this = this;
      var dlDom = this.$$('download');
      dlDom.onclick = function() {
         _this.createFilePath();
      }
    },
    // 创建文件路径
    createFilePath: function() {
        var _this = this;
       window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fs) {
          fs.root.getFile("downloadedImage.png", { create: true, exclusive: false }, function (fileEntry) {
              console.log(fileEntry);
              //调用fileTransfer插件，下载图片
              _this.downLoadImg(fileEntry.nativeURL);
              
          }, function(err) {
             console.log(err);
          });
       }, function(error) {
          console.log(error);
       });
    },
    // fileTransfer plugin
    downLoadImg: function(fileURL) {
       var _this = this;
       // 初始化FileTransfer对象
       var fileTransfer = new FileTransfer();
       // 服务器下载地址
       var uri = encodeURI("http://avatar.csdn.net/7/E/0/1_michael_ouyang.jpg");
       // 调用download方法
       fileTransfer.download(
           uri,         //uri网络下载路径
           fileURL,      //url本地存储路径
           function(entry) {
               console.log("download complete: " + entry.toURL());
               _this.$$('myImage').src = entry.toURL();
           },
           function(error) {
               console.log("download error source " + error.source);
               console.log("download error target " + error.target);
               console.log("upload error code" + error.code);
           }
       );
    }
};

app.initialize();

运行：

点击按钮，下载图片

图片下载成功后，显示在页面上

备注：

控制台输出的fileEntry对象的内容

拿到这个图片在手机系统的路径

file:///data/user/0/com.abc.www/files/files/downloadedImage.png

现在打开手机的文件管理器，是找不到该图片的

因为我们没有设置持久化文件的保存路径，默认会保存在data里面

那么在config.xml中加上这一句代码

<preference name="AndroidPersistentFileLocation"value="Compatibility"/>

再启动应用下载图片，fileEntry对象的nativeURL变成了storage

file:///storage/emulated/0/downloadedImage.png

打开手机的文件管理器，查看下载回来的图片

michael_ouyang

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
5
评论
cordova filetransfer插件——上传、下载文件

介绍FileTransfer对象提供给了一种将文件上传到服务器的方法，可以通过HTTP和HTTPS进行请求，可以传递一个由FileUploadOptions对象设定的可选参数给upload方法。上传成功后，系统会调用成功回调函数并传递一个FileUploadResult对象。如果出现错误，那么系统会调用错误回调函数并传递一个FileTransferError对象。
复制链接

扫一扫