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

 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.

---

Screenshot:

---

# 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.

//*
<input id="fUpload" multiple type="file" /><br />
   <ul id="ulList">
   </ul>
<input id="btnShow" type="button" value="Show" />
//*

 

---

#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.

//*
$("#btnShow").on('click', function () {
    $("#ulList").empty();
    var fp = $("#fUpload");
    var lg = fp[0].files.length; // get length
    var items = fp[0].files;
    var fragment = "";
    
    if (lg > 0) {
        for (var i = 0; i < lg; i++) {
            var fileName = items[i].name; // get file name
            var fileSize = items[i].size; // get file size 
            var fileType = items[i].type; // get file type

            // append li to UL tag to display File info
            fragment += "<li>" + fileName + " (<b>" + fileSize + "</b> bytes) - Type :" + fileType + "</li>";
        }

        $("#ulList").append(fragment);
    }
});
//*

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 Asp.net c#.
2. Upload and resize image in Asp.net using dropzone js.
3. Preview Image before upload it with jQuery in Asp.net.

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!