HTML5で複数のプログレスバー付きファイルアップロードを実装する方法

複数ファイルアップロードでプログレスバーを個別に動かすには

HTML5のXMLHttpRequest（XHR）を使って複数のファイルをアップロードする場合、ファイルごとに進捗状況を示すプログレスバーを表示したいことがよくあります。しかし、この機能を正しく動作させるには、少し工夫が必要です。

問題の原因は、xhr の progress イベントが、すべてのリスト項目（li要素）の作成が完了した後に発火するという点にあります。そのため、イベント発生時にどのプログレスバーを更新すべきかを、XHR側が把握できるようにする必要があります。

解決策：XHRに対応するリスト項目を紐付ける

具体的には、アップロード対象のリスト項目への参照を xhr.upload オブジェクトに直接持たせます。こうすることで、イベント発生時にどの要素を更新すればよいかを判別できるようになります。

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; で、uploadオブジェクトに対象のリスト項目への参照を保存します。
• progress イベント内では、event.loaded と event.total からアップロードの進捗率（%）を計算します。
• this.li を使うことで、イベントを発火したXHRに紐付いたリスト項目だけを更新でき、複数ファイルの同時アップロードでも各プログレスバーが正しく動作します。

この方法を使えば、複数ファイルを同時にアップロードする場合でも、それぞれのファイルに対応したプログレスバーを独立して動かすことができます。