Cordova - fileTransfer插件的使用详解（实现文件上传、下载）

最新推荐文章于 2024-05-18 10:32:09 发布

Mickey_于浩

最新推荐文章于 2024-05-18 10:32:09 发布

阅读量1.6w

点赞数

分类专栏： cordova 文章标签： cordova 文件上传 cordova-file 上传图片文件下载

原文链接：http://www.hangge.com/blog/cache/detail_1180.html

版权

cordova 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Cordova 提供了一个 fileTransfer 插件，通过这个插件我们很方便地实现文件的传输操作（上传、下载）。

1，添加FileTransfer插件

首先我们要在“终端”中进入工程所在的目录，然后运行如下命令添加插件：

cordova plugin add cordova-plugin-file-transfer

2，文件下载

下面代码通过url地址下载网络上的图片到本地（ iOS系统保存在 Documents 目录下）

原文:Cordova - fileTransfer插件的使用详解（实现文件上传、下载）

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

原文出自：www.hangge.com 原文链接：http://www.hangge.com/blog/cache/detail_1180.html

Mickey_于浩

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
Cordova - fileTransfer插件的使用详解（实现文件上传、下载）

Cordova提供了一个fileTransfer插件，通过这个插件我们很方便地实现文件的传输操作（上传、下载）。1，添加FileTransfer插件首先我们要在“终端”中进入工程所在的目录，然后运行如下命令添加插件：1cordova plugin add cordova-plugin-file-transfer
复制链接

扫一扫