获取图片尺寸（上传前）

Question

在我从事的项目中，我需要在上传图片之前检查图片尺寸（宽度和高度）。

我需要3个检查点

1-> 如果尺寸小于 600 X 600 像素，则不接受上传

1-> 如果尺寸大于 600 x 600 像素且小于 1200 x 1200 像素，则接受警告质量不好和

3-> 如果尺寸大于 1200 X 1200 像素，则接受...

我有你看到的代码.. 但是有两个问题 1 当图像是 550X700 时返回可接受并警告这一定是不可接受的......第二个问题是当我尝试更改它保留的图像时也是旧的值..请检查代码：jsfiddle

$("#file").change(function() {
    var file, img;
    if ((file = this.files[0])) {
        img = new Image();
       /* img.onload = function() {
            alert(this.width + " " + this.height);
        };
        img.onerror = function() {
            alert( "not a valid file: " + file.type);
        };
        img.src = _URL.createObjectURL(file); */
    }
    if ((file = this.files[0])) {
        img = new Image();

        img.onload = function() {
        //green
            if (this.width > 1200 && this.height > 1200){
            $('.text1').css('visibility', 'visible');
            $('.text1').append(this.width + "X & " + this.height+ "Y");
            $(".grey").addClass("green");
            $('.textgreen').css('visibility', 'visible')
            }
        //red
            else if ((this.width < 600) && (this.height < 600)){
            $('.text1').css('visibility', 'visible');
            $('.text1').append(this.width + "X & " + this.height+ "Y");
            $(".btn.btn-success.btn-xs").remove();
            $(".grey").addClass("red");
            $('.textred').css('visibility', 'visible');
            }
         //yellow
            else if (($(this.width > 600) && $(this.width <1200)) && ($(this.height > 600) && $(this.height <1200))){
            $('.text1').css('visibility', 'visible');
            $('.text1').append(this.width + "X & " + this.height+ "Y");
            $(".grey").addClass("yellow");
            $('.textyellow').css('visibility', 'visible')
            }
            else {
            return;
            }


        };
        img.src = _URL.createObjectURL(file);


    }

});`

Answer 1

当您更改图像时，old values 仍然存在，因为您是 appending 新文本。你需要更换旧的。所以，为了简单起见，我添加了一个空的span，而不是附加新文本，我只是替换它。

背景颜色和“优质文本”也是如此。您需要删除其他类并添加新类。

您的第一个问题是因为您在第二个if 中使用了&& 运算符。您需要将其更改为||。

HTML

<input type="file" id="file" />
<div class="grey">
  <p class="text1">Image Dimensions : <span></span></p>
  <p class="textred">File quality is very low we can not accept this image
    <br><strong>Please select an other image</strong> </p>
  <p class="textyellow">file quality is accepteble but not high</p>
  <p class="textgreen">file quality is high</p>
  <button type="button" class="btn btn-success btn-xs" ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess">
    Upload
  </button>
</div>

jQuery

...
img.onload = function() {
    //green
    if (this.width > 1200 && this.height > 1200) {
        $('.text1').css('visibility', 'visible');
        $('.text1 span').text(this.width + "X & " + this.height + "Y");
        $(".grey").removeClass('red yellow').addClass("green");
        $('.textred, .textyellow').css('visibility', 'hidden');
        $('.textgreen').css('visibility', 'visible');
    }
    //red
    else if ((this.width < 600) || (this.height < 600)) {
        $('.text1').css('visibility', 'visible');
        $('.text1 span').text(this.width + "X & " + this.height + "Y");
        $(".btn.btn-success.btn-xs").remove();
        $(".grey").removeClass('green yellow').addClass("red");
        $('.textgreen, .textyellow').css('visibility', 'hidden');
        $('.textred').css('visibility', 'visible');
    }
    //yellow
    else if (($(this.width > 600) && $(this.width < 1200)) && ($(this.height > 600) && $(this.height < 1200))) {
        $('.text1').css('visibility', 'visible');
        $('.text1 span').text(this.width + "X & " + this.height + "Y");
        $(".grey").removeClass('green red').addClass("yellow");
        $('.textgreen, .textred').css('visibility', 'hidden');
        $('.textyellow').css('visibility', 'visible');
    } else {
        return;
    }
};
...

JSFiddle