Fortschrittsbalken aktualisiert seine Breite beim Hochladen von Dateien nicht

Question

Ich lade Dateien hoch und zeige Fortschrittsbalken für jeden Ladevorgang an, aber es gilt nur für einen Fortschrittsbalken.

In html,

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

In 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%'; 
    } 
} 

});

Das Ergebnis für das gleichzeitige Hochladen von drei Dateien zeigt einen Fortschrittsbalken mit 100% und zwei Balken mit 0%. Was ist daran falsch?

Answer 1

Sie können f außerhalb von for loop definieren, for loop anpassen, um Bedingung i < f.length einzuschließen; Übergeben Sie i an ein IIFE, um einen separaten Bereich für jeden Aufruf von FileReader zu erstellen.

$("#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>

Siehe Upload multiple image using AJAX, PHP and jQuery