进度条在文件上传中未更新其宽度

Question

我上传文件并显示每个负载的进度条，但仅适用于仅一个进度栏。

在HTML中，

<input type="file" id="file-input" multiple> 
    <div id="file-list"> 
    </div> 

在Javascript中，

$('#file-input').change(function(e) { 

for (var i = 0, f; f = files[i]; i++) { 

    var reader = new FileReader(); 
    reader.readAsBinaryString(f); 

    reader.onloadstart = function (e) { 
     var text = '<div><div id="progress_bar" class="loading"><div class="percent">0%</div></div></div>'; 
     $('#file-list').append(text); 
    } 

    reader.onload = function(e) { 
     var progress = document.querySelector('.percent'); 
     progress.style.width = '100%'; // replacing with percentage 
     progress.textContent = '100%'; 
    } 
} 

}）;

一次上传三个文件的结果是100％显示一个进度条，0％显示两个小节。这有什么问题？

Answer 1

您可以在for循环之外定义f循环，调整for循环以包含条件i < f.length;将i传递给IIFE，以便为每次致电FileReader创建一个单独的范围。

$("#file-input").change(function(e) { 
 
    var f = e.target.files; 
 
    for (var i = 0; i < f.length; i++) { 
 
    (function(n) { 
 
     var reader = new FileReader(); 
 
     reader.readAsBinaryString(f[n]); 
 

 
     reader.onloadstart = function(e) { 
 
     var text = "<div><div class=loading><div class=percent-" 
 
        + n + ">0%</div></div></div>"; 
 
     $("#file-list").append(text + "<br>"); 
 
     } 
 

 
     reader.onload = function(e) { 
 
     var progress = $(".percent-" + n); 
 
     progress.css("width", "100%"); // replacing with percentage 
 
     progress.text("100%"); 
 
     } 
 
    }(i)) 
 
    } 
 
});

[class^="percent"] { 
 
    width: 1%; 
 
    height: 24px; 
 
    background: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<input type="file" id="file-input" multiple> 
 
<div id="file-list"> 
 
</div>

参见Upload multiple image using AJAX, PHP and jQuery