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
- HTML markup: Add input tag, with multiple attributes.
- 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:
- Easy way to upload bulk images in Asp.net c#.
- Upload and resize image in Asp.net using dropzone js.
- 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!
5 comments on “How to Get File Name, Size, Type Count in jQuery [Input File, File Api]”
Thanks, it worked 🙂
i am using (TS) property size not found
please help me
please check my code
$(“#frmDocumentUpload”).submit(function () {
let fileName: string = $(“:file[name=’file’]”).val();
if (!fileName) {
return false;
}
const allowedFileExtensions: Array = [“.doc”, “.docx”, “.pdf”, “.DOCX”, “.DOC”,”.PDF”];//, “.xls”, “.xlsx”, “.zip”, “.rar”, “.7z”
const allowedFileSize: string = “2MB”;
let isAllowedFileExtension: boolean = false;
$.each(allowedFileExtensions,
function(index, value) {
if (root.strEndWith(fileName, value)) {
isAllowedFileExtension = true;
return false;
}
return true;
});
if (!isAllowedFileExtension) {
alert(`${fileName} is not allowed to be uploaded. Please select another file.`);
return false;
}
return true;
});
Hi Satinder,
Very nice article buddy.
Thanks
Hello, this site is good , i like tsis page more than github…. 😉
Thanks Venceslas.
Keep visiting 🙂