Check File Size Before Form Submit (HTML5)
But in recent years, the HTML5 is doing wonders for the web browsers. It comes with many features, including the client-side file objects manipulation (File API). Which means we can now throwaway the old methods, and adopt to this new system, which not only returns file properties, but it opens a whole new set of possibilities.
File Size Validation (Client-side)
Here’s what I did to an upload form that uses jQuery.
The code below contains the HTML file input field and a submit button :
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:
File type validation (Client-side)
How about restricting file type user can upload?
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!
Saran Chamling. (He loves the web technology, and enjoys designing, exploring and writing about it @saaraan.com).