2017  Kodetalk | Feedback | Privacy Policy | Terms | About

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.

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