여러 진행률 표시줄을 활용한 HTML5 파일 업로드 구현하기

여러 진행률 표시줄을 활용한 HTML5 파일 업로드

여러 파일을 동시에 업로드할 때 각 파일마다 개별적인 진행률 표시줄(progress bar)을 구현하려면, XMLHttpRequest의 progress 이벤트를 올바르게 처리하는 것이 핵심입니다.

여기서 주의해야 할 점은 xhr의 progress 이벤트가 모든 목록 항목(li 요소)이 이미 생성된 이후에 발생한다는 것입니다. 따라서 각 진행률 표시줄이 자신에게 해당하는 업로드 작업과 정확히 연결되도록 하려면 약간의 우회 작업이 필요합니다.

해결 방법은 각 XMLHttpRequest 객체가 어떤 DOM 요소를 업데이트해야 하는지 미리 알 수 있도록 해당 요소의 참조를 저장해 두는 것입니다. xhr이 무엇을 해야 할지 스스로 인식할 수 있게 만드는 원리입니다.

var a = new XMLHttpRequest();
a.upload.li = li;

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

코드 동작 원리

• a.upload.li = li; — 현재 업로드에 대응하는 목록 항목(li) 요소를 XMLHttpRequest 객체의 upload 속성에 직접 저장하여, 이후 이벤트 발생 시 어떤 요소를 갱신할지 식별할 수 있습니다.
• event.loaded / event.total * 100 — 이미 전송된 바이트 수를 전체 크기로 나누어 업로드 진행률(백분율)을 계산하고, parseInt()로 정수 형태로 변환합니다.
• this.li.find(".progressbar").width(pc) — 계산된 백분율만큼 해당 목록 항목 내부의 .progressbar 요소 너비를 조정하여 진행 상태를 시각적으로 표시합니다.

이 방식을 사용하면 여러 파일을 동시에 업로드하더라도 각각의 진행률 표시줄이 서로 간섭하지 않고 독립적으로 정확하게 업데이트됩니다.