使用ionic开发webapp进行文件上传与下载

1.添加依赖的插件

1.org.apache.cordova.file-transfer
https://github.com/apache/cordova-plugin-file-transfer
This plugin allows you to upload and download files.
This plugin defines global FileTransfer, FileUploadOptions Constructors.
Although in the global scope, they are not available until after the deviceready event.
Installation

cordova plugin add cordova-plugin-file-transfer


2. org.apache.cordova.file
https://github.com/apache/cordova-plugin-file
This plugin implements a File API allowing read/write access to files residing on the device.
Installation
cordova plugin add cordova-plugin-file

2.保证你的项目中已经集成并且引用了ngCordova插件在你的

app.controller('MyCtrl', function($scope, $timeout, $cordovaFileTransfer) {
  $scope.downloadFile = function() {
    var url = "http://your_ip_address/images/my.jpg";
    var filename = url.split("/").pop();//也可以用<span style="color: rgb(34, 34, 34); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; line-height: 22.1px;">filename.lastIndexOf("/") !== -1 ? filename.substr(filename.lastIndexOf("/")+1):"" 来获取文件名</span>
    alert(filename);
    var targetPath = cordova.file.externalRootDirectory + filename;
    var trustHosts = true
    var options = {};
    alert(cordova.file.externalRootDirectory);
    $cordovaFileTransfer.download(url, targetPath, options, trustHosts)
      .then(function(result) {
        // Success!
        alert(JSON.stringify(result));//把对象转化成字符串
      }, function(error) {
        // Error
        alert(JSON.stringify(error));
      }, function (progress) {
        $timeout(function () {
          $scope.downloadProgress = (progress.loaded / progress.total) * 100;
        })
      });
 }
$scope.uploadFile = function() {
     var url = "http://your_ip_address/uploads/upload.php";
     //target path may be local or url
     var targetPath = "http://your_ip_address/images/my.jpg";
      var filename = targetPath.split("/").pop();
        var options = {
            fileKey: "file",
            fileName: filename,
            chunkedMode: false,
            mimeType: "image/jpg"
        };
        $cordovaFileTransfer.upload(url, targetPath, options).then(function(result) {
            console.log("SUCCESS: " + JSON.stringify(result.response));
            alert("success");
            alert(JSON.stringify(result.response));
        }, function(err) {
            console.log("ERROR: " + JSON.stringify(err));
            alert(JSON.stringify(err));
        }, function (progress) {
            // constant progress updates
            $timeout(function () {
            $scope.downloadProgress = (progress.loaded / progress.total) * 100;
          })
        });
    }
});



你可能感兴趣的:(Web,APP,upload,插件)