美文网首页
更换上传图片不符合条件时,展示原来的图片

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

作者: 山丘lemon | 来源:发表于2019-04-09 15:11 被阅读0次
    //在上传图片的时候,不符合指定宽高的时候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)
     });
    

    }

    相关文章

      网友评论

          本文标题:更换上传图片不符合条件时,展示原来的图片

          本文链接:https://www.haomeiwen.com/subject/gzgbiqtx.html