1.

ionic start uploadTest blank
cd uploadTest
ionic platform add android

2.添加插件

cordova plugin add org.apache.cordova.camera
cordova plugin add org.apache.cordova.file-transfer

3.下载用力戳

ng-cordova.min.js

4.在index.html中引用

    <script src="js/ng-cordova.min.js"></script>
    <script src="cordova.js"></script>

5. 注入ngCordova

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services','ngCordova'])

6.在HTML文件中

     <img ng-show="imgURI !== undefined" ng-src="{{imgURI}}">
     <img ng-show="imgURI === undefined" ng-src="http://placehold.it/300x300">
     <button class="button" ng-click="takePicture()">Take Picture</button><br/>
     <button class="button" ng-click="upload()">Upload From Assets</button>

7.在控制器文件中

.controller('DashCtrl', function($scope, $cordovaCamera, $cordovaFile) {
  $scope.takePicture = function() {
    var options = {
      quality: 75,
      destinationType: Camera.DestinationType.DATA_URL,
      sourceType: Camera.PictureSourceType.CAMERA,
      allowEdit: true,
      encodingType: Camera.EncodingType.JPEG,
      targetWidth: 300,
      targetHeight: 300,
      popoverOptions: CameraPopoverOptions,
      saveToPhotoAlbum: false
    };

    $cordovaCamera.getPicture(options).then(function(imageData) {
      $scope.imgURI = "data:image/jpeg;base64," + imageData;
    }, function(err) {
      // An error occured. Show a message to the user
    });
  }


  $scope.upload = function() {
    var options = {
      fileKey: "avatar",
      fileName: "image.png",
      chunkedMode: false,
      mimeType: "image/png"
    };
    $cordovaFile.uploadFile("你的IP 上传", $scope.imgURI, options).then(function(result) {
      alert("SUCCESS: " + JSON.stringify(result.response));
    }, function(err) {
     alert("ERROR: " + JSON.stringify(err));
    }, function(progress) {
      // constant progress updates
    });
  }


})

 

posted on 2015-02-11 13:48  ทดสอบ  阅读(324)  评论(0)    收藏  举报