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

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

您可以定义f for 之外循环，调整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