Перебирая файлы для FileReader, вывод всегда содержит последнее значение из цикла

Я использую FileReader API для чтения файлов на локальном компьютере.

<input type="file" id="filesx" name="filesx[]" onchange="readmultifiles(this.files)" multiple="" />

<script>
function readmultifiles(files) {
    var ret = "";
    var ul = document.querySelector("#bag>ul");
    while (ul.hasChildNodes()) {
        ul.removeChild(ul.firstChild);
    }
    for (var i = 0; i < files.length; i++)  //for multiple files
    {
        var f = files[i];
        var name = files[i].name;
        alert(name);
        var reader = new FileReader();  
        reader.onload = function(e) {  
            // get file content  
            var text = e.target.result;
            var li = document.createElement("li");
            li.innerHTML = name + "____" + text;
            ul.appendChild(li);
        }
        reader.readAsText(f,"UTF-8");
    }
}
</script>

Если вход включает 2 файла:

file1 ---- "content1"
file2 ---- "content2"

Я получаю этот вывод:

file2__content1
file2__content2

Как исправить код для отображения:

file1__content1
file2__content2

Ответы на вопрос(4)

Ваш ответ на вопрос