Angalarjs之上拉菜单（ActionSheet）实现使用拍照和选择图库的方式上传头像功能

---

说明

上拉菜单(ActionSheet)通过往上弹出的框，来让用户选择选项。
非常危险的选项会以高亮的红色来让人第一时间识别。你可以通过点击取消按钮或者点击空白的地方来让它消失。
注明：以上为引用，本文笔者拍照方式上传头像并未直接调用相机，而是采用file属性capture=”camera” 即可，详细见代码

• 笔者主要实现使用拍照和选择图库的方式上传头像功能

开发准备

• 开发工具

  笔者采用JetBrains WebStorm 10.0.3环境安装可参阅笔者博文AngularJS入门之简单的项目搭建

• action-sheet.js与action-sheet.css下载

  笔者提供action-sheet，CSDN资源最低2积分，读者可自行百度下载

功能开发

引用action-sheet.js与action-sheet.css

    <link rel="stylesheet" type="text/css" href="css/action-sheet.css"/>
 <script>
        document.write("<s"+"cript  data-main='text/javascript' src='lh-bsweb/js/action-sheet.js?t="+new Date().getTime()+"'></scr"+"ipt>");
    </script>

ps: 使用document.write写入的方式引用js文件可以起到去缓存的效果

app.js代码片段

var myApp = angular.module('myApp',["ngRoute",'actionsheet','upHeadImageCtrl']);

ps: myApp 注册”ngRoute”,’actionsheet’,’upHeadImageCtrl’

UpHeadImageCtrl.js代码片段

controller('upHeadImageCtrl', ['$scope','$rootScope','$location','userService','$http',function ($scope,$rootScope,$location,userService,$http) {
        currentpage="bankcard";
        var token= userService.checkLgin();
        $rootScope.basepath=basepath;
        $rootScope.headTitle = $rootScope.title = "上传头像";
        $scope.goback = function () {
            history.back();
        };
        //上拉菜单
        $scope.open=function(){
            var as = new ActionSheet({
                buttons: {
                    '拍照': function(e){
                        //if(!confirm('确定吗？')) return;
                        $("#cameraup").click();
                        this.hide();
                    },
                    '照片图库': function(e){
                        $("#fileup").click();
                        //if(!confirm('确定吗？')) return;
                        this.hide();
                    }
                    /* '跳转到百度': 'http://baidu.com/',*/
                }
            });
            as.show();
        };
        $scope.reader = new FileReader(); //创建一个FileReader接口
        $scope.myFile=null;
        $scope.thumb = {};      //用于存放图片的base64
     //头像上传
       $scope.headImageupload = function(files){
            $scope.myFile=null;
            $scope.myFile=files[0];
            $scope.submitUp();
            $scope.reader.readAsDataURL($scope.myFile);  //FileReader的方法，把图片转成base64
            $scope.reader.onload = function(ev) {
                $scope.$apply(function(){
                    $scope.thumb[0] = {
                        imgSrc : ev.target.result,  //接收base64
                    }
                });
            };
        };
        $scope.imgurl=basepath+'images/my/touxiang.png';
        $scope.thumb[0] = {
            imgSrc :   $scope.imgurl,  //接收base64
        };
        userService.getbusinessinfo({token:token}).then(function(data){
            if(data.code>0){
                $scope.imgurl=data.data[0].headurl;
                if( $scope.imgurl != null){
                    $scope.thumb[0] = {
                        imgSrc :   $scope.imgurl,  //接收base64
                    };
                }
            }
        });
        //头像上传
        var head_h5_upload_ops = {
            init:function(){
                this.eventBind();
            },
            eventBind:function(){
                $("#fileup").change(function(){
                    $scope.headImageupload(this.files);
                });
                $("#cameraup").change(function(){
                    $scope.headImageupload(this.files);
                });
            },
            compress : function (res) {

            }
        };
        head_h5_upload_ops.init();
        $scope.submitUp = function(){
            var data = new FormData();      //以下为像后台提交图片数据
            data.append('headimage', $scope.myFile);
            data.append('token',token);
            $http({
                method: 'post',
                url: baseurl+'/user/upheadimage',
                data:data,
                headers: {'Content-Type': undefined},
                transformRequest: angular.identity
            }).success(function(data) {
                console.log(data);
            })
        };
    }])

uploadheadimage.html代码片段

  <!--<input type="button" value="ActionSheet"/>-->
    <form  enctype="multipart/form-data">
        <div>
            <div ng-repeat="item in thumb" style="margin: auto;" align="center">
                <!-- 采用angular循环的方式，对存入thumb的图片进行展示 -->
                <span ng-if="item.imgSrc" ng-click="img_del($index)">
                    <img ng-src="{{item.imgSrc}}" style="width: 212px;height: 212px;margin-top: 20%;"/>
                </span>
            </div>
            <div style="display: none;">
                <label >
                    <input type="file"  id="fileup" accept="image/*" file-model="images" />
                    <input  type="file" id="cameraup" accept="image/*;" capture="camera"   />
                </label>
            </div>
        </div>
        <!--<input type="submit" name="" value="提 交" />-->
    </form>

效果展示