Debesh Nayak Debesh Nayak - 2 years ago 98
Javascript Question

How to display multiple files properties using jQuery?

I am trying to display the details of multiple uploaded files using jQuery.

Here is my code:

<!DOCTYPE html>
<title>jQuery Multi File Upload</title>
<form id="file_upload" action="" method="get" enctype="multipart/form-data">
<p><input type="file" name="file_1" class="uploadFile"></p>
<input type="submit" value="Upload" id="btnSubmit">
<a id="add_more" href="#">Add more</a>
<script src=""></script>
var current_count = $("input[type='file']").length;
var next_count = current_count + 1;
$("#file_upload").prepend('<p><input type="file" name="file_'+next_count+'" class="uploadFile" /></p>');
var file_count = $(".uploadFile").length;

var file_arr = [];
for (var i = 0; i < file_count; i++){
// file_arr[i] = $(".uploadFile")[i].files[i];
file_arr[i] = $(".uploadFile").prop('files')[i];

But the problem is that it is displaying the details of the first uploaded file properly, and gives me error
Uncaught TypeError: Cannot read property 'name' of undefined
for the 2nd file onward.

Answer Source
$("#btnSubmit").on('click', function () {

    var fp = $(".uploadFile");
    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>";


View Blog Article : How to get file name, size, type count in jQuery [input file, File Api]

View : Live Demo

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download