ZH奶酪：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，type
var 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) {
}

 擴展：

這裏有一篇文章，使用ng-cordova的file transfer插件進行上傳和下載->http://santoshshinde2012.blogspot.sg/2015/03/file-upload-download-with-ng-cordova.html