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

获取图片尺寸（上传前）

1 个答案: