###現在できること
複数のファイルを読み込み,進捗状況をバーに表示.
###起こっている問題
大容量(※)のファイルを読み込んだとき,表示が終わる前にバーが100%になってしまう.
(※大容量ファイルとは1MB以上の,Shift_JISで書かれたテキストファイルです.)
###完成させたいもの
読み込み状況+表示状況を進捗バーに表示する。
=> **表示が完了したときにバーが100%**になるようにしたい。
HTML
1<input type = "file" id = "targetfile" muliple = "multiple"><br> 2<progress value = "0" max = "100" id = "progress"></progress>
JavaScript
1var prg = document.getElementById("progress"); 2document.getElementById("targetfile").addEventListener('change',function(e){ 3 var result = e.target.files; //複数のファイルデータ 4 var end = e.target.files.length; //ファイル数 5 6 for(var i=0 ; i<end ; i++){ //すべてのファイルを読み込む 7 var reader = new FileReader(); //ファイルリーダーの作成 8 reader.readAsText(result[i]); //textで読み込み 9 reader.onprogress = evt => { 10 prg.value = (evt.loaded / evt.total)*100; //進捗状況 11 }; 12 reader.addEventListener('load',function(e){ 13 str = e.target.result; 14 console.log(str); //取得したファイル内容を表示 15 }); 16 }; 17 });
###環境
Windows10 ⇒ Windows7
GoogleChrome バージョン:63.0.3239.132(Official Build)(64 ビット)
言語 JavaScript
以上,追記するべき箇所等ありましたら,ご指摘の程よろしくお願いいたします.
###追記・修正
2018/01/10 環境をWindows7に変更
回答1件
あなたの回答
tips
プレビュー