【功能介紹】
在開發應用的時候，經常會遇到需要上傳圖片的功能，比如修改個人資料的頭像。本文介紹的是基於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