share facebook facebook2 twitter menu hatena pocket slack

2011.12.21 WED

HTML5 プログレスバー

小森隆太

WRITTEN BY 小森隆太

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

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

○index.html

<input type="file" id="filedata" accept="text/*" >
<input type="button" id="read" value="読み込み" >
<progress id="loadstatus" max="100" value="0" >Now Loading...</progress>
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)が書いています。

小森隆太

小森隆太