userimage

JQuery image validation with scaled size or based on width and height

The requirement is to upload and submit an image from client to server with a fixed size like 32*16.

So need help to validate an image from client side based on the width and height before final submit.

userimage
Find the code snippet using JQuery to find the image size for the input file


var _URL = window.URL || window.webkitURL;
var imageSize = "";
var isValidFile = "";
$("#imageFileId").change(function(e) {
                var file, img;
                if ((file = this.files[0])) {
                    isValidFile=""; //need to reset locally before use
                    imageSize=""; //need to reset locally before use
                    img = new Image();
                    img.onload = function() {
                        imageSize=this.width +"*"+ this.height; // will give the actual size of an image like 100*100
                    };
                    img.onerror = function() {
                        isValidFile=false; // if any error occured during process for the corrupted file or upsopported file will go to error mode
                    };
                    img.src = _URL.createObjectURL(file);
                }
            });


Now you can proceed with your validation based on imageSize and isValidFil. Hope it will helpful for you.

Answer is