Check File Size & Extension Before Uploading Using jQuery

Today, i will share a tutorial with you how to check file size and extension before uploading the file. It is one of the most common validation that need to be check before uploading file, i wrote this simple tutorial to validate the image file size (Maximum 1 MB Allowed) and extension (JPG, JPEG, PNG or GIF are allowed) for our image file by using jQuery.

Additionally, submit button will remain disable until the valid input file is provided.

Note: Kindly don’t forget to include the jQuery library in the header or footer of web page.

Thanks a lot for your “Check file size and type before uploading”
It was very helpful for me.
Now I want to know about: ” Check the file name/ Image name of the dir using Ajax, error Msg: Already exist.

Well it will be more better if you provide the demo link so that i can check it on the spot, but i advice that you can use this to get the height and width then place condition on it.
var img = document.getElementById(‘imageid’);
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;
Use alert to check if you are getting height or width of image for testing purpose only.