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

Question

I'm trying to show on screen the content from some text-files that I'm select to upload. But is only showing the last file. Can someone tell me why this happend and what can I do to show the content from all files?

HTML

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

Script

$('#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 is being overwritten every loop iteration, when the onload callback fires the value of reader will be the one that was last created and not the one the callback is bound to.
Since the callback is bound to its respective reader you can use the this keyword to reference it, the event parameter of the onload callback can also be used to identify the correct reader.

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