여러 진행 막대가있는 HTML5 파일 업로드

Question

XmlHTTPRequest 및 HTML5를 통해 여러 파일을 업로드하고 있습니다. 업로드 작업이 정상적으로 처리되었지만 계속 진행되는 각 파일 업로드에 대한 진행률 표시 줄을 갖고 싶습니다. 그러나 내가 가지고있는 코드는 자신의 진행률 표시 줄을 사용하는 각 업로드 대신 모든 파일 업로드의 마지막 진행률 표시 줄을 사용합니다. 이것은 클라이언트 측에서 대부분 시각적이지만, 실제로 저를 귀찮게합니다. 어떤 이유로 나는 파일 업로드 진행 상황을 첨부하는 이벤트가 자체를 덮어 쓰고 마지막 진행률 표시 줄을 사용한다고 가정합니다. 내 코드는 다음과 같습니다.

적절한 "li"이 "progress"이벤트에 의해 올바르게 읽히지 않는다고 가정합니다. "진행"이벤트에 "li"이라는 특정 변수를 사용하라는 명령을 내리려면 일종의 바인딩이 필요하다고 생각합니다. 그러나 무엇이 빠졌는지 잘 모르겠습니다.

Answer 1

예제가 제대로 작동하지 않는 이유는 모든 목록 항목이 이미 만들어 졌을 때 xhr 진행 이벤트가 발생하지 않는다고 생각하지 않기 때문입니다. 그러나 귀하의 모범을 보일 수있는 많은 방법이 있습니다. 아이디어는 xhr이 정확히 어떤 목록 항목을 다루고 있는지 알려주는 것입니다. 예를 들어이 코드를 사용하십시오. (그렇게된다면 내가 확인하지 않은이 코드의 목적은 아이디어를 설명하는 것입니다) :

var xhr = new XMLHttpRequest(); 
xhr.upload.li = li; 
xhr.upload.addEventListener('progress', function(e) { 
    var percent = parseInt(e.loaded/e.total * 100); 
    this.li.find(".progressbar").width(percent); 
}, false); 

Answer 2

은 내가이 문제에 대한 해결책을 찾은 것 같아요. 그것은 내 테스트 중 일부에서 작동하는 것 같습니다. 영어에 능숙하지 않아 샘플 스크립트를 공유 할 것입니다. 어떤 질문을하면 더 설명하려고합니다 :)

// This is input object which type of file. 
var uploader = document.getElementById("fileUploader"); 

// We'll send a new post for each file. 
for(var i=0, j=uploader.files.length; i<j; i++) 
{ 
    var uploaderForm = new FormData(); // Create new FormData 
    uploaderForm.append("action","upload"); // append extra parameters if you wish. 
    uploaderForm.append("up_file",uploader.files[i]); // append the next file for upload 

    var xhr = new XMLHttpRequest(); 

    xhr.addEventListener("loadstart", function(e){ 
     // generate unique id for progress bars. This is important because we'll use it on progress event for modifications 
     this.progressId = "progress_" + Math.floor((Math.random() * 100000)); 

     // append progress elements to somewhere you want 
     $("body").append('<div id="' + this.progressId + '" class="myCustomProgressBar" ></div>'); 
    }); 
    xhr.addEventListener("progress", function(e){ 
     var total = e.total; 
     var loaded = e.loaded; 
     var percent = (100/total) * loaded; // Calculate percentage of loaded data 

     // I animate progress object. Notice that i use "this.progressId" which i created on loadstart event. 
     $("#" + this.progressId).animate({"width":300 * (percent/100)}, 800); 
    }); 

    xhr.open("POST","index.php"); 
    xhr.send(uploaderForm); 
}