html表中上传的文件详细信息

Question

一旦选择要上传的文件，我必须在表格中显示选择要上传的文件的详细信息（文件大小、文件名）。我可以显示所选文件的详细信息，但如果用户选择第二个文件, 表格中的第二行应动态添加并显示所选第二个文件的详细信息，并应在表格的“sno”列中显示序列号。即使用户一次可以选择多个文件，但应显示每个文件的详细信息在表格的单独行中。 http://jsfiddle.net/f38cB/ 下面是代码： JSP 代码：

   <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 代码：

 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;

        };

Answer 1

看看这个：http://jsfiddle.net/f38cB/1/

我将表格行添加到 JS 函数中，并让它添加到表格中而不是替换值。

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
};