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

2016-05-22 发布：hangge 阅读：22897

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

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楼

2017-10-16 17:35

小白

您好，想请问下服务端代码怎么部署？问题有点白痴，见谅！

站长回复：
这个三言两语说不清。如果你感兴趣的话可以上网找找资料，比如我文章提供的服务端代码是php的，你可以搜索php入门教程。很简单，大概学个两天左右你就知道怎么部署了。
2楼

2017-10-16 17:33

匿名

great！

站长回复：
多谢夸奖:)
1楼

2017-09-04 10:46

锋利

在上传文件的时候，用户怎么去选择要上传的文件？我用input file标签选择文件后，获取它的值变成C:\fakepath\2345123。请问在cordova中是不是禁用了input file标签？在cordova中怎么实现选择文件后上传的功能？

站长回复：
不建议在Cordova中使用input file，这么做确实是有问题的。