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

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

1 个答案: