介绍
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 发表于2017/7/18 15:03:38 原文链接
阅读：122 评论：0 查看评论