How to Validate File size and extension before upload in javascript

Spread the love

It is a smart think to apply client side validation on document/pictures uploads in javascript,without a big headache you can check file extension and size before uploading a file so that user won’t be able to transfer unsupported file and big size files.And this is the best way to keep your site and server safe from junk files.

file size validation in javascript, file upload size limit validation in javascript, image size validation in javascript example, input type file validation using javascript, jquery file extension validation, jquery get file size, limit file size upload javascript


Here is the some demo html with file input box.

JavaScript + Jquery

Below I have created individually function for file extension and size validation, Here i validated image extension , for example image extension should be .png, .jpg, .jpeg, or .gif etc, other file extensions are not allowed, You can add more extensions on validExt variable.

Image extension validation before upload

File size validation before upload

following function will get the file size and validate your maximum allowed size, you can set your max file size limit just assign file size to maxSize variable in kb

Finally call all the functions on file input .change event and pass file data to validate one by one.

Download Code

Leave a Reply

Your email address will not be published. Required fields are marked *