ionic 的项目实现从手机相册选取图片或拍照并上传至服务器

【 一 】使用 bower 下载 ng-file-upload 插件

             (bower 是什么以及如何安装与使用在我的博客中有一篇文章介绍，可移步查看)

【 二 】app 中引入 'ngFileUpload'

        (function(){
            angular.module('starter', [
                'ionic','ngFileUpload'
            ]);
       })();

 【 三 】HTML 文件中

       <ion-item  class="ionItem1" ngf-select ng-model="data.file" name="file" ngf-pattern="'image/*'" ngf-multiple="false">
            <label class="item_title">头像</label>
            <img src="" class="headerImage"  ngf-src="data.file || data.defaultImage">
            <span class="ion-chevron-right"></span>
        </ion-item>

【四】控制器中（控制器需注入 UpLoad ）

       $scope.data = {
            file: null,
            defaultImage: '../img/图片.jpg'
        };


        $scope.$watch('data.file', function(newValue, oldValue, scope) {
            console.log('newValue==' + newValue);
            console.log('oldValue==' + oldValue);
             if($scope.data.file){
                $scope.upload($scope.data.file);
             }
        });


        // 上传图片
        $scope.upload = function(file) {
            Upload.upload({
                //服务端接收
                url: 'upload/url',
                //上传的同时带的文件和参数
                data: { file: file, 'username': $scope.username }
            }).then(function(resp) {
                console.log('Success ' + resp.config.data.file.name + 'uploaded. Response: ' + resp.data);
            }, function(resp) {
                console.log('Error status: ' + resp.status);
            }, function(evt) {
                var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
                console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
            });
        };

【 五 】 该插件同时支持多个文件上传和文件拖拽，实现方式与上面的例子大同小异，github 上有文章介绍： 进入查看