Image dimension rules using jQuery validation plugin

Question

Is it possible to specify image dimension rules using the jQuery validation plugin? For example, let's say I want the image that is being uploaded to be at least 600px wide. Is it possible to set up a rule for this? If so, how does one achieve it?

Answer 1

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();
        }

    });