check image dimentions

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>

CSS

.grey {
  padding: 20px;
  border: solid 1px #000;
}

.red {
  background-color: red;
}

.yellow {
  background-color: yellow;
}

.green {
  background-color: green;
}

.textred,
.textred1,
.textyellow,
.textgreen {
  visibility: hidden;
}

JavaScript

var _URL = window.URL || window.webkitURL;

$("#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 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;
      }


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


  }

});