更换上传图片不符合条件时,展示原来的图片

2019-04-09  本文已影响0人  山丘lemon
//在上传图片的时候,不符合指定宽高的时候return false, 并且显示原来的图片
  <input class="cm-fail-input" type="file" name="上传" title="上传" ng-model="logoImg"     onchange="angular.element(this).scope().changeLogImg(this)">
  $scope.changeLogImg = function (tag) {
     var file = $(tag)[0].files[0];
     if (!(file.type == "image/png" || file.type == "image/jpeg")) {
          angular.element('.cm-fail-input').val(null);
             "图片格式不正确,请选择PNG或JPG格式"
              return false;
       }
  var reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = function () {
      var image = new Image();
      if (file.size > 800 * 1024) {
      angular.element('.cm-fail-input').val(null);
            message: "图片大小不能超过800KB,请重新选择"
            return false
  }
   image.onload = function () {
       var width = image.width;
       var height = image.height;
       if (width != 1920 || height != 112) {
              message: "标题图片分辨率要求为1920*112,请重新选择"
               $scope.iconImgSizeChecked = false;
                 return false 
        } else {
               $scope.iconImgSizeChecked = true;
      }
  var base64 = this.result;
  image.src = base64;
  $scope.$apply(function () {
    $timeout(function () {
      //在这里判断,是否符合条件,符合就走else,不符合的话就把返回的图片(原来的图片)展示,并且置为true,再次选择的时候会重新走上面的判断
      if (!$scope.iconImgSizeChecked) {
              $scope.messageObj[name + 'Img'] = $scope.iconImg;
              $scope.iconImgSizeChecked = true;
        } else { 
              $scope.messageObj[name + 'Img'] = base64;
        }
      }, 600)
 });

}

上一篇下一篇

猜你喜欢

热点阅读