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

来源：互联网发布：facetime是什么软件编辑：程序博客网时间：2024/05/22 12:28

介绍

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();

运行：

点击按钮，下载图片