Question

在上传多个文件时，我想在用户选择要上传的文件后显示在html表中选择的多个文件的详细信息。问题是我不应该使用＆＃34; File API＆＃34;因为它在IE8中不受支持。请在＆＃34; http://jsfiddle.net/KQQCQ/1/＆＃34;中找到相同的内容。以下是JavaScript代码：

var fileNameIndex = document.getElementById('fileUpload').value.lastIndexOf("\\");
    var file_name = document.getElementById('fileUpload').value.substring(fileNameIndex + 1);

    if(document.getElementById("sno1").value == ''){
    document.getElementById("sno1").value=rowN;
    document.getElementById("fileName1").value=file_name;
    rowN++;
    } else{
            document.getElementById("sno2").value=rowN;
            document.getElementById("fileName2").value=file_name;
        }

HTML代码：

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

<table border="1" id="uploadTable" style="visibility:hidden;" align="center">

           <tr> <th width="50px" style="text-align: center;">SNo</th><th width="100px" style="text-align: center;">FileName</th><th width="100px" style="text-align: center;">Action</th> </tr>
          <tr><td width="50px"><input type="text" name="sno1" id="sno1"/></td>
             <td width="100px"><input type="text" name="fileName1" id="fileName1" border="0"/></td> 

           </tr>  

            <tr><td><input type="text" name="sno2" id="sno2"/></td>
             <td width="100px"><input type="text" name="fileName2" id="fileName2"/></td> 

           </tr>     
</table>

请建议，如何在html表格中显示用户选择的多个文件的详细信息，以及我注意到的其他问题是在IE8中我无法选择多个文件。

Answer 1

首先回答问题的最后部分，IE8和IE9不支持多个文件选择和上传。

至于列出表格中的文件，这段代码应该有用......

Javscript： var _validFileExtensions = [“。xls”，“。xslx”，“。pptx”，“。pt”，“。doc”，“。dococ”，“。txt”];

    var validateFileUpload = function () {
        document.getElementById("uploadTable").style.visibility="visible";

        var filelist = document.getElementById("fileUpload").files || [];
        console.log(filelist);
        for (var i = 0; i < filelist.length; i++) {
            var file_name = filelist[i].name;       

            if (isValid(file_name)) {
                var table = document.getElementById("uploadTable"),
                    row = document.createElement("tr"),
                    col1 = document.createElement("td"),
                    col2 = document.createElement("td");

                col1.appendChild(document.createTextNode(i+1));
                col2.appendChild(document.createTextNode(file_name));
                row.appendChild(col1);
                row.appendChild(col2);
                table.appendChild(row);
            } else {
                alert("Sorry, " + file_name + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
            }
        }      
    }

    function isValid(file_name) {
        var blnValid = false;
        if (file_name.length > 0) {
          for (var j = 0; j < _validFileExtensions.length; j++) {
              var sCurExtension = _validFileExtensions[j];
              if (file_name.substr(file_name.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
                  blnValid = true;
                  break;
              }
           }
        }
        return blnValid;
    }

    document.getElementById("fileUpload").onchange = validateFileUpload;

HTML：

    <div id="uploadFile_div"><input type="file" name="fileUpload" size="50" id="fileUpload" multiple="multiple" /></div>
    <table border="1" id="uploadTable" style="visibility:hidden;" align="center"></table>

这是小提琴：http://jsfiddle.net/mifi79/9GsNf/1/

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

1 个答案: