uploaded file details in html table

Question

I have to show the details of files(filesize,filename) selected to upload in the table once the file is selected to upload.I'm able to show the details of one file selected, but if the user select second file, a second row in the table should be added dynamically and show the details of second file selected and should display the serial number in "sno" column in the table.Even user can select multiple files at a time but each file details should be shown in individual row of the table. http://jsfiddle.net/f38cB/ Below is the code: JSP Code:

   <input type="file" name="fileUpload" size="50" id="file1" multiple/>

        <table border="1" id="uploadTable" style="visibility:hidden">
              <tr> <th>SNo</th><th>FileName</th><th>FileSize</th><th>Action</th> </tr>
              <tr><td><input type="text" name="sno" id="sno"/></td>
                    <td><input type="text" name="fileName" id="fileName"/></td> 
                    <td><input type="text" name="fileSize" id="fileSize"/></td>
                  <td width="100%"><a href="">delete</a></td>
        </tr> 
      </table>

JavaScript code:

 document.getElementById("file1").onchange = function() {
        document.getElementById("uploadTable").style.visibility="visible";
        var file = this.files[0];
        document.getElementById("fileSize").value = file.size + " bytes";
        document.getElementById("fileName").value = file.name;

        };

@RUJordan - Yes in jsp page, i have written html code for this functionality. — user3692021, May 30 '14 at 17:02
One way is to add the `` stuff to your JS function, and append instead of replacing value. — dcclassics, May 30 '14 at 17:25

score 0 · Accepted Answer · answered May 30 '14 at 17:37

Check this out: http://jsfiddle.net/f38cB/1/

I added the table row to the JS function, and have it add to the table instead of replace the value.

var rowN = 0; //set counter for row IDs
document.getElementById("file1").onchange = function() {
    document.getElementById("uploadTable").style.visibility="visible";
    var file = this.files[0];
    var table = document.getElementById("uploadTable"); //set the table as a var
    var row = '<tr><td><input type="text" name="sno" id="sno' + rowN + '"/></td><td><input type="text" name="fileName" id="fileName' + rowN + '" value="' + file.name + '"/></td><td><input type="text" name="fileSize" value="' + file.size + '" id="fileSize' + rowN + '"/></td><td width="100%"><a href="">delete</a></td></tr>'; //add row as variable
    //document.getElementById("uploadTable").value = file.size + " bytes"; //don't need this
    //document.getElementById("fileName").value = file.name; //or this
    table.innerHTML = table.innerHTML + row;  //append row
    rowN++; //add count to row
};

I'm afraid I cannot help troubleshoot in IE. Maybe someone else will be able to help. — dcclassics, May 30 '14 at 17:59
Although this [link](http://stackoverflow.com/a/9000029/2002412) may shed some insight on the problem. — dcclassics, May 30 '14 at 18:00

uploaded file details in html table

1 Answers1