javascript - 处理多个上传的html文件

Question

我的任务是上传多个 html 文件，并将它们的内容复制到我的 html 中。

这是html部分：

<input type="file" id="fi" onChange="xx();" multiple>UPLOAD</span>

JavaScript 部分：

function xx (){        

    var fi = document.getElementById('fi').files[0];

    reader.onload = function (e){

        var reader = new FileReader();


        var inn = document.getElementById("main_text");  
        inn.innerHTML="";        
        var inner ="";
        inner  += this.result;                         
        inn.innerHTML ="<div class='paper'>"+inner+"</div>";
        <!--codes-->

    }
    reader.readAsText(fi);
}

我已经删除了代码中无用的部分。最初它只能处理单个文件。然后我multiple在 html 输入代码中添加了属性。

似乎在这一行中，最后一个files[0]决定要读取哪个文件。 var fi = document.getElementById('fi').files[0];

如何修改它以归档在上传功能中处理多个 html 页面的目标？

非常感谢！

Answer 1

您必须遍历文件：

function xx (){        

    var fi     = document.getElementById('fi').files;
    var inn    = document.getElementById("main_text");
    var div    = document.createElement('div');

    div.className = 'paper';
    inn.appendChild(div);

    for (var i=0; i<fi.length; i++) {
        var reader = new FileReader();

        reader.onload = function (e){
            var txt = document.createTextNode(this.result);
            div.appendChild(txt);
        }
        reader.readAsText(fi[i]);
    }
}