check image dimensions-2

by Timoleon Pagounas

HTML

<input type="file" id="gfile" />
<button type="button" class="btn-xs" ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess">
 Upload
</button>
<div class="grey">
testett
</div>

CSS

.grey{padding:20px;border:1px solid #CCC;}
.red{background-color:#F00;}
.blue{background-color:#00f;}

JavaScript

window.URL = window.URL || window.webkitURL;

$("#gfile").submit( function( e ) {
    var gfile = this;
    e.preventDefault(); //Stop the submit for now
                                //Replace with your selector to find the file input in your form
    var fileInput = $(this).find("input[type=file]")[0],
        file = fileInput.files && fileInput.files[0];

    if( file ) {
        var img = new Image();

        img.src = window.URL.createObjectURL( file );

        img.onload = function() {
            var width = img.naturalWidth,
                height = img.naturalHeight;

            window.URL.revokeObjectURL( img.src );

            if( width > 400 ) {
           // if( width > 400 && height == 300 ) {
          //  if( width == 400 && height == 300 ) {
           //     form.submit();
              //  $( ".grey" ).addClass( "red" );
              //  $( ".grey" ).css( "backgroundColor", "yellow" );
                $(".btn-xs").remove();
            }
            else {
                //fail
            }
        };
    }
    else { //No file was input or browser doesn't support client side reading
        form.submit();
    }

});