ionic+angularJS+cordova(FileTransfer)上传图片
【功能介绍】css
在开发应用的时候，常常会遇到须要上传图片的功能，好比修改我的资料的头像。本文介绍的是基于ionic框架，在移动端上传图片的功能。html
【功能流程】app
（1）点击页面上的头像，弹出一个对话框，选择[拍照]或者[从相册选择]；框架
（2）选取/拍摄照片；ionic
（3）上传照片；函数
【html核心代码】url
<div ng-controller="myCtrl">
<a ng-click="choosePicMenu()">
<img ng-src="{{img}}">
</a>
</div>
【myCtrl.js核心代码】spa
（1）选取图片的函数code
//定义选择照片的函数，
$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）上传函数中的核心代码htm
//新建文件上传选项，并设置文件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) {}