進行状況バーがファイルアップロードの幅を更新しない

Question

ファイルをアップロードしていて、ロードごとにプログレスバーを表示していますが、1つのプログレスバーにのみ適用されます。 HTMLで

、JavaScriptでは

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

、

$('#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%'; 
    } 
} 

}）。

3つのファイルを同時にアップロードすると、100％の進行状況バーと0％の2つのバーが表示されます。これには何が問題なのですか？

Answer 1

forの外側にfを定義すると、forループに条件i < f.lengthを含めるように調整できます。 FileReaderへの呼び出しごとに別のスコープを作成するには、iをIIFEに渡します。

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