Question

我试图在屏幕上显示我选择上传的某些文字文件中的内容。但只显示最后一个文件。有人能告诉我为什么会发生这种情况，我该怎么做才能显示所有文件中的内容？

HTML

<input type="file" id="file_upload" accept='text/plain' multiple><br>
<span id="output"></span>

脚本

$('#file_upload').on("change", function(){ 
    var reader = new FileReader();

    for (var i = 0, f; f = $(this).get(0).files[i]; i++) {
        var reader = new FileReader();

        $('#output').append('<br>');            
        $('#output').append('<div>'+'<strong>'+$(this).get(0).files[i].name+'</strong>'+'</div>');
        reader.readAsText($(this).get(0).files[i]); 

        reader.onload = function(){
            var text = reader.result;
            $('#output').append('<div>'+reader.result.substring(0, 200)+'</div>');
        };

    }

});

Answer 1

每次循环迭代都会覆盖

reader，当onload回调触发时，reader的值将是上次创建的值而不是回调绑定的值。
由于回调绑定到其各自的阅读器，您可以使用this关键字来引用它，onload回调的事件参数也可用于识别正确的阅读器。

    reader.onload = function(e){
        var text = this.result;
        //var text = e.target.result;
        $('#output').append('<div>'+text.substring(0, 200)+'</div>');
    };

上传多个文本文件并使用jquery在屏幕上预加载

1 个答案: