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

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

我需要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);


    }

});`

最佳答案

更改图像时，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

关于javascript - 获取图像尺寸(上传之前)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34884904/