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

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

似乎在这一行中，最后一个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]);
    }
}

处理多个上传的html文件

1 个答案: