ionic+angularJS+cordova(FileTransfer)上傳圖片

【功能介紹】

在開發應用的時候，常常會遇到須要上傳圖片的功能，好比修改我的資料的頭像。本文介紹的是基於ionic框架，在移動端上傳圖片的功能。

【功能流程】

（1）點擊頁面上的頭像，彈出一個對話框，選擇[拍照]或者[從相冊選擇]；

（2）選取/拍攝照片；

（3）上傳照片；

【html核心代碼】

<div ng-controller="myCtrl">
    <a ng-click="choosePicMenu()">
        <img ng-src="{{img}}">
    </a>
</div>

【myCtrl.js核心代碼】

（1）選取圖片的函數

//定義選擇照片的函數，
$scope.choosePicMenu = function() {
    var type = 'gallery';
    $ionicActionSheet.show({
        buttons: [
            { text: '拍照' },
            { text: '從相冊選擇' }
        ],
        titleText: '選擇照片',
        cancelText: '取消',
        cancel: function() {
        },
        buttonClicked: function(index) {
            if(index == 0){
                type = 'camera';
            }else if(index == 1){
                type = 'gallery';
            }
　　　　　　　//Camera.getPicture(type)->根據選擇的「選取圖片」的方式進行選取
            Camera.getPicture(type).then(
　　　　　　　　　 //返回一個imageURI，記錄了照片的路徑
                function (imageURI) {
                    $scope.me.image = imageURI;
　　　　　　　　　　　 //更新頁面上的照片
                    $scope.img = imageURI;
                    $scope.$apply();
                },
                function (err) {
                });
            return true;
        }
    });
};

 （2）上傳函數中的核心代碼

//新建文件上傳選項，並設置文件key，name，typevar options = new FileUploadOptions();options.fileKey="ffile";options.fileName=$scope.me.image.substr($scope.me.image.lastIndexOf('/')+1);options.mimeType="image/jpeg";//用params保存其餘參數，例如暱稱，年齡之類var params = {};params['name'] = $scope.me.name;//把params添加到options的params中options.params = params;//新建FileTransfer對象var ft = new FileTransfer();//上傳文件ft.upload(    $scope.me.image,    encodeURI('some url'),//把圖片及其餘參數發送到這個URL，至關於一個請求，在後臺接收圖片及其餘參數而後處理    uploadSuccess,    uploadError,    options);//upload成功的話function uploadSuccess(r) {    var resp = JSON.parse(r.response);    if(resp.status == 0){　　　　 //返回前一頁面        $navHistory.back();    }else{        $ionicPopup.alert({            title: 'Message',            cssClass: 'alert-text',            template:  'Upload fail!'        });    }}//upload失敗的話function uploadError(error) {}