javascript - 获取图像尺寸(上传前)

Question

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

我需要 3 个检查点

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

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

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

我有你看到的代码..但是有两个问题1当图像为550X700时返回可以接受并警告这必须是 Not Acceptable ...第二个问题当我尝试更改图像时它也保留旧的值..请检查代码: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

当您更改图像时，旧值仍然存在，因为您正在附加新文本。您需要更换旧的。因此，为了简单起见，我添加了一个空的 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