Validating File Size Before Form Submit (HTML5)

Earlier browsers did not support HTML5 File API, so normally people would use flash or Java Applets to validate file format and sizes in HTML upload forms, and most of us preferred to skip the client part letting server handle the problem.But in recent years, the HTML5 is doing wonders, it comes with many features including the client-side file objects manipulation (File API). Which means no more 3rd party plug-ins such as flash or Java applets.

Browser Support

File Size Validation (Client-side). Here's what I did to an upload form that uses jQuery. When the button is clicked, the Javascript checks. Feb 21, 2018  Form validation using HTML and JavaScript Forms are used in webpages for the user to enter their required details that are further send it to the server for processing. A form is also known as web form or HTML form.

For More info click here.

• Partly
• 49+
• 61+
• 11.1+

File Size Validation (Client-side)

Here's what I did to an upload form that uses jQuery.When the button is clicked, the Javascript checks whether the client browser supports this feature called File API or not, and then we move to next part where we actually access the size from selected file and decide our next move.

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

The code below contains the HTML file input field and a submit button :

• 1
• 2

Returning File Name, Type and Size

You can easily retrieve other important file variables too. The code below returns name, size and type of the file:

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19

File type validation (Client-side)

How about restricting file type user can upload?

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25

Conclusion

The above examples shows the basic things you can do with File API, directly interact with client files without the use of alternative methods. All modern browsers should support HTML5's File API, you can check caniuse.com for any changes. Good luck!