アップロード状況を確認できるプログレスバーを実装してみよう!!

おそようございます．yuuです．
今回は「アップロード状況を確認できるプログレスバーを実装してみよう」ということでやっていきたいと思います．
ちなみにアップロードに関してはこちらとか見てみて下さい．(宣伝じゃないよ)

アップロード状況を取得するには，onprogressイベントを使用します．
以下に簡単な使用例を紹介します．

まずはhtmlから．
<progress>〜</progress>は，非対応ブラウザ用に進捗状況をテキストで出力することが推奨されていますが，今回は外でパーセンテージを出してるので<label>を挿入．
progressはhtml5で追加された要素になります．

    
        アップロード状況：
    
    0%

次にJavaScriptです．
fileUploadはdataTransfer.filesから取得したfileを引数として呼び出す関数です．
「dataTransfer？」って方は記事上部のリンクへどうぞ．(宣伝じゃないよ)

function fileUpload(file){ 
    var xhr = new XMLHttpRequest();
    var formData = new FormData();
    var sendUrl = 'http://localhost:8080/upload/'+file.name // アップロード先

    var progressBar = document.querySelector('#progress-area>progress');
    var percentage = document.querySelector('#progress-area>span.percentage');

    formData.append('name', file.name);
    formData.append('file', file);

    // アップロードスタートイベント
    xhr.uplad.onloadstart = function(e){
        progressBar.max = e.total;
        progressBar.value = e.loaded;
    }

    // アップロード更新イベント
    xhr.upload.onprogress = function(e){
        progressBar.value = e.loaded;
        percentage.textContent = Math.floor(progressBar.position * 100) + '%';
    }

    // アップロード完了イベント
    xhr.upload.onloadend = function(e){
        percentage.textContent = '100% Successfull';
    }

    xhr.open('POST', encodeURI(sendUrl));
    xhr.send(formData);
}

onloadstart，onprogress，onloadend以外にもontimeout，onabort，onerrorなどのイベントもあります．適宜使用していきましょう．

今回は以上になります．多分一週間後にまた登場予定です．
なんか，コード貼って終わりな感じがあるけどいいのでしょうか？