How to Check Dimensions of Image Before Uploading

Check image width and height before upload with Javascript

The file is just a file, you need to create an image like so:

var _URL = window.URL || window.webkitURL;
$("#file").change(function (e) {
    var file, img;
    if ((file = this.files[0])) {
        img = new Image();
        var objectUrl = _URL.createObjectURL(file);
        img.onload = function () {
            alert(this.width + " " + this.height);
            _URL.revokeObjectURL(objectUrl);
        };
        img.src = objectUrl;
    }
});

Demo: http://jsfiddle.net/4N6D9/1/

I take it you realize this is only supported in a few browsers. Mostly firefox and chrome, could be opera as well by now.

P.S. The URL.createObjectURL() method has been removed from the MediaStream interface. This method has been deprecated in 2013 and superseded by assigning streams to HTMLMediaElement.srcObject. The old method was removed because it is less safe, requiring a call to URL.revokeOjbectURL() to end the stream. Other user agents have either deprecated (Firefox) or removed (Safari) this feature feature.

For more information, please refer here.

Is it possible to check dimensions of image before uploading?

You could check them before submitting form:

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

$("form").submit( function( e ) {
    var form = 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 && height == 300 ) {
                form.submit();
            }
            else {
                //fail
            }
        };
    }
    else { //No file was input or browser doesn't support client side reading
        form.submit();
    }

});

This only works on modern browsers so you still have to check the dimensions on server side. You also can't trust
the client so that's another reason you must check them server side anyway.

Get file size, image width and height before upload

Multiple images upload with info data preview

Using HTML5 and the File API

Example using URL API

The images sources will be a URL representing the Blob object

<img src="blob:null/026cceb9-edr4-4281-babb-b56cbf759a3d">

const EL_browse  = document.getElementById('browse');const EL_preview = document.getElementById('preview');
const readImage  = file => {  if ( !(/^image\/(png|jpe?g|gif)$/).test(file.type) )    return EL_preview.insertAdjacentHTML('beforeend', `Unsupported format ${file.type}: ${file.name}<br>`);
  const img = new Image();  img.addEventListener('load', () => {    EL_preview.appendChild(img);    EL_preview.insertAdjacentHTML('beforeend', `<div>${file.name} ${img.width}×${img.height} ${file.type} ${Math.round(file.size/1024)}KB<div>`);    window.URL.revokeObjectURL(img.src); // Free some memory  });  img.src = window.URL.createObjectURL(file);}
EL_browse.addEventListener('change', ev => {  EL_preview.innerHTML = ''; // Remove old images and data  const files = ev.target.files;  if (!files || !files[0]) return alert('File upload not supported');  [...files].forEach( readImage );});

#preview img { max-height: 100px; }

<input id="browse" type="file" multiple><div id="preview"></div>

Check image dimensions (height and width) before uploading image using PHP

You need something that is executed on the client before the actual upload happens.

With (server-side) php you can check the dimension only after the file has been uploaded or with upload hooks maybe while the image is uploaded (from the image file header data).

So your options are flash, maybe html5 with its FileAPI (haven't tested that, maybe that's not doable), java-applet, silverlight, ...

Get image dimensions (before uploading)

When you change the image, the old values are still there because you are appending the new text. You need to replace the old one. So, for that to be easy, I added an empty span and instead of appending the new text, I just replace it.

The same is happening with the background color and the "quality texts". You need to remove the other classes and add the new one.

And your first problem is because you are using the && operator in the second if. You need to change it to ||.

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

Getting width & height of an image with filereader

You have to wait for the image to load. Try handling the element inside .onload.

I've also simplified the process of setting the source of the two elements to how you should be doing it (with jQuery).

reader.onload = (function(theFile) { 
    var image = new Image();
    image.src = theFile.target.result;

    image.onload = function() {
        // access image size here 
        console.log(this.width);

        $('#imgresizepreview, #profilepicturepreview').attr('src', this.src);
    };
});