check image dimentions

by Timoleon Pagounas

HTML

<input type="file" id="file" />
<div class="grey">
<p class="text1">Image Dimensions :</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').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);


    }

});