Загрузка файла HTML5 с большим успехом

Question

У меня есть код, который отправляет несколько файлов на сервер с помощью FileReader для отображения изображений и FormData для отправки через ajax.

Мой код работает, проблема заключается в том, чтобы показать несколько индикаторов выполнения. Если я выбираю только один файл, он работает.

Но если я выбираю несколько файлов, это показывает прогресс всех файлов в последней строке выполнения.

Может ли кто-нибудь помочь?

(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);}()); 

Мои Php Код:

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>"; 

Мой 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

У вас есть вопрос закрытия, использовать this вместо xhr сослаться на текущий объект XMLHttpRequest в функции обратного вызова событий;

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)) 
}