###実現したいこと
ファイルの読み込み状況に合わせて進捗バーを動作させる.
###該当のソースコード
HTML
1<form name="test"> 2<input type="file" id="targetfile"><br> 3<textarea name="txt" rows="10" cols="50" readonly></textarea><br> 4<br><progress value = "0" max = "100" id = "progress1"></progress> 5</form>
JavaScript
1var prg = document.getElementById("progress1"); 2var str = document.getElementById("targetfile"); 3str.addEventListener("change",function(evt){ //ダイアログでファイルが選択された時 4 var file = evt.target.files; 5 var reader = new FileReader();//FileReaderの作成 6 reader.readAsText(file[0]); //テキスト形式で読み込む 7 8 //読込終了後の処理 9 reader.onload = function(ev){ 10 document.test.txt.value = reader.result;//テキストエリアに表示する 11 prg.value = 100; 12 } 13},false);
###起こっている問題
短いファイルならこれでもままでも読み込み状況にあっているように見えるが,長いファイルになるとテキストエリアに書き出される前に100%になってしまう.
###言語・動作環境
GoogleChromeバージョン: 63.0.3239.132(Official Build) (64 ビット)
JavaScript
調べてみましたがこれといった方法が見つからず質問させていただきました.
以上,不明点等ありましたら追記しますのでよろしくお願いいたします.
###訂正後コード追記(2018/01/08 21:37)
Javascript
1 reader.onprogress = evt => { 2 console.log(reader.result); 3 console.log(`${(evt.loaded / evt.total) * 100 | 0}%`); 4 };
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/01/08 12:27
2018/01/08 12:30
2018/01/08 12:41
2018/01/09 00:53
2018/01/09 11:34