share facebook facebook twitter menu hatena pocket slack

HTML5 プログレスバー

小森隆太

WRITTEN BY 小森隆太

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

今回は、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)が書いています。

小森隆太

小森隆太

cloudpack

cloudpackは、Amazon EC2やAmazon S3をはじめとするAWSの各種プロダクトを利用する際の、導入・設計から運用保守を含んだフルマネージドのサービスを提供し、バックアップや24時間365日の監視/障害対応、技術的な問い合わせに対するサポートなどを行っております。
AWS上のインフラ構築およびAWSを活用したシステム開発など、案件のご相談はcloudpack.jpよりご連絡ください。