How to Get File Name, Size, Type Count in jQuery [Input File, File Api]

Our Reader Score
[Total: 0 Average: 0]

 jQuery get File Name, Type: This article explains how to get the file name, file size (in bytes), file type (Text/PDF/CSS files) and total selected file counts in jQuery before uploading it to the server.

Basically, when the user selects any files using input file tag we will display its name, size and the total number of files selected.

Using File interface, we are able to get the information about files and allows to access their content.

Step to show file name, size, count before upload

  1. HTML markup: Add input tag, with multiple attributes.
  2. jQuery code: To access file content using File API.


Get File Name, File size, File Type using File API with jQuery

# Html Markup:

Here’s first we add  an input file tag, a button tag and a UL list tag.

To make multiple file selection we need to add multiple (HTML5 attribute) to our file tag. UL tag is used to display each selected file information .i.e (name,size,type).

Using Html5 FileReader we can also preview image before upload it in jQuery. Our HTML markup looks like as written below.


#jQuery code: to get file info (name,size,type)

Here first we check for file length i.e is any file selected, then only will make a for loop to get access of file information. The final code looks like as shown below.

Try it Yourself »

Yeah, we are done now, this is how we get the selected file name and other properties in jQuery.

You can also check these articles:

  1. Easy way to upload bulk images in c#.
  2. Upload and resize image in using dropzone js.
  3. Preview Image before upload it with jQuery in

Hope you enjoyed this tutorial. If you have any recommendations, please let us know what you think in the comment section below! See you again next time!


Print PDF

Get your Printable Copy