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