HTML5 プログレスバー

こんにちわ。
職人見習いの小森です。

今回は、HTML5のプログレスバーについてまとめます。
HTML5 ファイル 読み込みの記事で作成したものに追加します。

○index.html

Now Loading...
 id="fileinfo" 
 id="Contents" 

progressタグを利用します。

○file.js

window.addEventListener("load",function(){
    if(!window.file){
        ele.innerHTML = "File APIが使用できません"
        return;
    }
    var ele = document.getElementById("fileinfo");

    document.getElementById("read").addEventListner("click",function(){
       var textFile = document.getElementById("filedata").files[0];

       if(textFile.type.indexOf("text/") != 0 ){
          ele.innerHTML += "ファイルはテキストではない"; 
          return;
       }

       var pr;
       pr = document.getElementById("loadstatus");

       var reader;
       reader = new FileReader();

       reader.onload = function(evt){
         var totalData = evt.total;
         pr.innerHTML = "100%("+totalData+"/"+totalData+" Byte)";
         pr.vlaue = 100;
         var text = evt.target.result;
         document.getElementById("Contents").textContent = text;
       }

       reader.onerror = function(evt){
          var errorNo = evt.target.error.code;
          ele.innerHTML += "エラー："+errorNo;
       }

       reader.onprogress = function(evt){
         var lodingData = evt.loaded;
         var totalData = evt.total;
         var per = (loadData/totalData) * 100;
         per = per.toFixed(1);
         pr.innerHTML = per+"% ("+totalData+"/"+totalData+" Byte)";
         pr.value = per;
       }

       reader.onloadend = function(evt){
        //読み込み完了時のイベント
       }

       reader.readAsText(textFile,"utf-8");

    },true);

},true);

FileReaderオブジェクトのonprogressイベントで、Eventオブジェクトのloadedプロパティで読込のトータルサイズ、totalプロパティでファイルサイズがわかるので、そこから計算した結果をプログレスバーのvalueプロパティに入力します。
onprogressイベントが実行されるたびにプログレスバーのvalueプロパティが更新されてるのでバーが動いているように見えます。
さらにinnerHTMLも更新することでプログレスバー未対応ブラウザでも進捗を確認することができます。

注意事項として選択したファイルが全て読み込まれた場合に、必ずprogressイベントが実行される保証がないので、onloadイベントを定義して読込完了時にprogressと同様の処理が実行されるようにしておきます。

※この記事は、なかの人（spitz8008）が書いています。