1. 程式人生 > >angular +H5 上傳圖片 與預覽圖片

angular +H5 上傳圖片 與預覽圖片

scrip reader tex load .sh upd http upload wim

//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";
            }
        };

  

angular +H5 上傳圖片 與預覽圖片