Cordova - fileTransfer插件的使用详解(实现文件上传、下载)
作者:hangge | 2016-05-22 09:30
Cordova 提供了一个 fileTransfer 插件,通过这个插件我们很方便地实现文件的传输操作(上传、下载)。
1,添加FileTransfer插件
首先我们要在“终端”中进入工程所在的目录,然后运行如下命令添加插件:
2,文件下载
3,上传文件
下面代码点击按钮后,将 Documents 目录下的 hangge.png 图片上传到网络服务器上。
4,获取传输实时进度
通过 FileTransfer 对象的 onprogress 回调方法,我们可以监听到上传、下载的实时进度。
5,停止文件传输
通过 FileTransfer 对象的 abort() 方法可以中断当前进行的上传、下载操作。
1,添加FileTransfer插件
首先我们要在“终端”中进入工程所在的目录,然后运行如下命令添加插件:
cordova plugin add cordova-plugin-file-transfer
2,文件下载
下面代码通过url地址下载网络上的图片到本地(iOS系统保存在 Documents 目录下)
<!DOCTYPE html> <html> <head> <title>Capture Photo</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 downloadImage(){ window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fs) { console.log('打开的文件系统: ' + fs.name); var url = 'http://www.hangge.com/blog/images/logo.png'; fs.root.getFile('hangge.png', { create: true, exclusive: false }, function (fileEntry) { download(fileEntry, url); }, onErrorCreateFile); }, onErrorLoadFs); } //下载文件 function download(fileEntry, uri) { var fileTransfer = new FileTransfer(); var fileURL = fileEntry.toURL(); fileTransfer.download( uri, fileURL, function (entry) { console.log("下载成功!"); console.log("文件保存位置: " + entry.toURL()); }, function (error) { console.log("下载失败!"); console.log("error source " + error.source); console.log("error target " + error.target); console.log("error code" + error.code); }, null, // or, pass false { //headers: { // "Authorization": "Basic dGVzdHVzZXJuYW1lOnRlc3RwYXNzd29yZA==" //} } ); } //文件创建失败回调 function onErrorCreateFile(error){ console.log("文件创建失败!") } //FileSystem加载失败回调 function onErrorLoadFs(error){ console.log("文件系统加载失败!") } </script> </head> <body style="padding-top:50px"> <button style="font-size:23px;" onclick="downloadImage();">下载图片</button> </body> </html>
3,上传文件
下面代码点击按钮后,将 Documents 目录下的 hangge.png 图片上传到网络服务器上。
<!DOCTYPE html> <html> <head> <title>Capture Photo</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 uploadImage(){ window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fs) { console.log('打开的文件系统: ' + fs.name); fs.root.getFile('hangge.png', { create: true, exclusive: false }, function (fileEntry) { upload(fileEntry); }, onErrorCreateFile); }, onErrorLoadFs); } //上传文件 function upload(fileEntry) { //获取文件的url路径地址 var fileURL = fileEntry.toURL(); //上传成功 var success = function (r) { console.log("上传成功! 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://www.hangge.com/upload.php" ft.upload(fileURL, encodeURI(SERVER), success, fail, options); }; //文件创建失败回调 function onErrorCreateFile(error){ console.log("文件创建失败!") } //FileSystem加载失败回调 function onErrorLoadFs(error){ console.log("文件系统加载失败!") } </script> </head> <body style="padding-top:50px"> <button style="font-size:23px;" onclick="uploadImage();">上传图片</button> </body> </html>附:服务端代码(upload.php)
<? move_uploaded_file($_FILES["file1"]["tmp_name"], $_SERVER["DOCUMENT_ROOT"]."/uploadFiles/" . $_FILES["file1"]["name"]); ?>
4,获取传输实时进度
通过 FileTransfer 对象的 onprogress 回调方法,我们可以监听到上传、下载的实时进度。
var ft = new FileTransfer(); //传输进度 ft.onprogress = function(progressEvent) { if (progressEvent.lengthComputable) { console.log("当前进度:"+progressEvent.loaded / progressEvent.total); } }; //上传地址 var SERVER = "http://www.hangge.com/upload.php" ft.upload(fileURL, encodeURI(SERVER), success, fail, options);
5,停止文件传输
通过 FileTransfer 对象的 abort() 方法可以中断当前进行的上传、下载操作。
ft.abort();
全部评论(3)
您好,想请问下服务端代码怎么部署?问题有点白痴,见谅!
站长回复:这个三言两语说不清。如果你感兴趣的话可以上网找找资料,比如我文章提供的服务端代码是php的,你可以搜索php入门教程。很简单,大概学个两天左右你就知道怎么部署了。
great!
站长回复:多谢夸奖:)
在上传文件的时候,用户怎么去选择要上传的文件?我用input file标签选择文件后,获取它的值变成C:\fakepath\2345123。请问在cordova中是不是禁用了input file标签?在cordova中怎么实现选择文件后上传的功能?
站长回复:不建议在Cordova中使用input file,这么做确实是有问题的。