angular +H5 上传图片 与预览图片

//index.html

<form class="form-horizontal">    <div class="panel panel-default">        <div class="panel-body">            <div class="container-fluid">                <div class="row">                    <div class="form-group">                        <label class="col-sm-2 control-label">司机姓名<span class="need">*</span></label>                        <div class="col-sm-4">                            <input type="text" class="form-control" ng-model="name" maxlength="20">                        </div>                        <label class="col-sm-2 control-label">司机身份证号</label>                        <div class="col-sm-4">                            <input type="text" class="form-control" ng-model="idNo" maxlength="18">                        </div>                    </div>                    <div class="form-group">                        <label class="col-sm-2 control-label">手机号<span class="need">*</span></label>                        <div class="col-sm-4">                            <input type="text" class="form-control" ng-model="mobile" maxlength="11">                        </div>                    </div>                    <div class="form-group">                        <label class="col-sm-2 control-label">身份证正面</label>                        <div class="col-sm-4">                            <img src="{{frontIdCardPreview}}" class="smImg" alt="..." id="frontIdCardPreview">                            <label class="labelForInput btn btn-info" for="frontIdCard">上传文件</label>                            <input type="file"  id="frontIdCard" class="inputOfFile" ng-src="{{frontIdCard[0].name}}" onchange="angular.element(this).scope().previewImage(‘frontIdCard‘,‘frontIdCardPreview‘)">                        </div>                        <label class="col-sm-2 control-label">身份证反面</label>                        <div class="col-sm-4">                            <img src="{{backIdCardPreview}}" class="smImg" alt="..." id="backIdCardPreview">                            <label class="labelForInput btn btn-info" for="backIdCard">上传文件</label>                            <input type="file" class="inputOfFile" id="backIdCard" ng-src="{{backIdCard[0].name}}" onchange="angular.element(this).scope().previewImage(‘backIdCard‘,‘backIdCardPreview‘)">                        </div>                    </div>                    <div class="form-group">                        <label class="col-sm-2 control-label">驾驶证照片正面</label>                        <div class="col-sm-4">                            <img src="{{photoDriverCardPreview}}" class="smImg" alt="..." id="photoDriverCardPreview">                            <label class="labelForInput btn btn-info" for="photoDriverCard">上传文件</label>                            <input type="file" class="inputOfFile" id="photoDriverCard" ng-src="{{photoDriverCard[0].name}}" onchange="angular.element(this).scope().previewImage(‘photoDriverCard‘,‘photoDriverCardPreview‘)">                        </div>                    </div>                </div>            </div>        </div>    </div>    <div class="text-center">        <button type="button" class="btn btn-info" ng-click="submit()">保存</button>        <button type="button" class="btn btn-default" ui-sref="main.myDriver">返回</button>    </div></form>

　　service.js

var uploadFile = function(dataParam,successFn,errFun){
          $http({
              method: ‘POST‘,
              url: configuration.apiBaseUrl+‘/api/tms/upload/uploadFile‘,
              data: dataParam,
              headers: {‘Content-Type‘: undefined},
              transformRequest: angular.identity
          }).success(function (data) {
              if(typeof successFn ===‘function‘){
                  successFn(data);
              }
          }).error(function (data) {
              if(typeof errFun === ‘function‘){
                  errFun(data);
              }
          });
      };

　　3:controller.js

 function save(frontIdCard,backIdCard,photoDriverCard) {
            var fd = new FormData();
            if(frontIdCard){
                fd.append("frontIdCard", frontIdCard);
            }
            if(backIdCard){
                fd.append("backIdCard", backIdCard);
            }
            if(photoDriverCard){
                fd.append("photoDriverCard", photoDriverCard);
            }
            myCarService.uploadFile(fd, function (data) {
                var fileArr = data.content;
                for(var i=0; i < fileArr.length; i++){
                    if("frontIdCard" === fileArr[i].fileNameKey){
                        $scope.frontIdCardSrc = fileArr[i].bigImgRtnPath;
                    }else if("backIdCard" === fileArr[i].fileNameKey){
                        $scope.backIdCardSrc = fileArr[i].bigImgRtnPath;
                    }else if("photoDriverCard" === fileArr[i].fileNameKey){
                        $scope.photoDriverCardSrc = fileArr[i].bigImgRtnPath;
                    }
                }
                myDriverService.updateDriver.post({
                    "driverId":$scope.driverId,
                    "name":$scope.name,
                    "idNo":$scope.idNo || "",
                    "mobile":$scope.mobile,
                    "frontIdCard":$scope.frontIdCardSrc,
                    "backIdCard":$scope.backIdCardSrc,
                    "photoDriverCard":$scope.photoDriverCardSrc,
                    "partnerNo": AppSession.getPartnerNo()
                },function(data){
                    if(data.code === 0){
                        messageCenterService.show("操作提示","保存成功", 2000);
                        $state.go(‘main.myDriver‘, {
                        }, {
                            reload: false
                        });
                    }else{
                        messageCenterService.show("操作提示",data.msg, 2000);
                    }
                });
            });
        }

　　照片的预览

 $scope.previewImage = function(fileId, imgId) {
            var preview = document.querySelector("#" + imgId);
            var file  = document.querySelector("#" + fileId).files[0];
            var reader = new FileReader();
            reader.onloadend = function () {
                preview.src = reader.result;
            }
            if (file) {
                reader.readAsDataURL(file);
            } else {
                preview.src = "images/noimg.png";
            }
        };