HTML5 file uploading with multiple progress - php

Question

I have a code that sends multiple files to the server using FileReader to display images and FormData to send via ajax.
My code works, the problem is to show the multiple progress bars. If I select only one file, it works.
But if I select multiple files it shows the progress of all files in the last progress bar.
Can anyone help?
(function () {
var input = document.getElementById("images")
function showUploadedItem (file, id) {
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
var template = '<li>'+
'<img src="'+e.target.result+'">'+
'<br />'+
'<progress min="0" max="100" value="0" id="'+id+'"></progress>'+
'</li>';
$("#image-list").append(template);
};
})(file);
reader.readAsDataURL(file);
}
input.addEventListener("change", function (evt) {
for (var i=0, j=this.files.length; i<j; i++) {
file = this.files[i];
formdata = new FormData();
formdata.append("images[]", file);
var xhr = new XMLHttpRequest();
xhr.id = "progress_" + Math.floor((Math.random() * 100000));
xhr.addEventListener("loadstart", function(e){
showUploadedItem(file, xhr.id);
});/*
xhr.addEventListener('progress', function(e) {
}, false);*/
xhr.upload.onprogress = function(e) {
var done = e.position || e.loaded, total = e.totalSize || e.total;
$("#" + xhr.id).attr('value', Math.floor((e.loaded / e.total) * 100) )
};
/*xhr.onreadystatechange = function(e) {
if ( 4 == this.readyState ) {
console.log(['xhr upload complete', e]);
}
};*/
xhr.open('post', 'upload.php', true);
xhr.send(formdata);
}
}, false);}());
My Php Code:
foreach ($_FILES["images"]["error"] as $key => $error) {
if ($error == UPLOAD_ERR_OK) {
$name = $_FILES["images"]["name"][$key];
move_uploaded_file( $_FILES["images"]["tmp_name"][$key], "uploads/" . $_FILES['images']['name'][$key]);
}} echo "<h2>Successfully</h2>";
My html;
<div id="main">
<div style="padding-bottom:10px">
<input type="file" name="images" id="images" multiple />
</div>
<ul id="image-list"></ul>
<br style="clear:both">
</div>

Answer 1

You have a closure issue, use this instead of xhr to refer to the current XMLHttpRequest object in the event callbacks;
function(e){
showUploadedItem(file, this.id);
});
function(e) {
var done = e.position || e.loaded, total = e.totalSize || e.total;
$("#" + this.id).attr('value', Math.floor((e.loaded / e.total) * 100) )
}