質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

XHR

XHR(別名XMLHttpRequest)はJavaScriptなどのスクリプト言語を使ってサーバーとHTTP通信を行うAPIを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

5539閲覧

【JavaScript】プログレスバーでダウンロード状況を表示 → 完了後実行する方法

phiilo_

総合スコア85

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

XHR

XHR(別名XMLHttpRequest)はJavaScriptなどのスクリプト言語を使ってサーバーとHTTP通信を行うAPIを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

2グッド

2クリップ

投稿2017/07/05 02:20

ダウンロードの進捗状況を表示する、よく見かけるプログレスバーをブラウザで実現したいと思います。

  1. JavaScriptでサーバーにあるデータ(動画、写真等指定なし)をダウンロード
  2. ダウンロード状況をパーセント表示し、ダウンロード完了(100%)
  3. alert("ダウンロード完了");

下記URLでは、まだJSのコードが不十分で、うまく動作しません。
緑のバーがテテーン♪と進んで欲しいです。
https://jsfiddle.net/7u586411/2/

具体的な質問内容が書けず申し訳ありませんが、
ご指摘いただければ、解決に近づけるかもしれません。

頑張ります。よろしくお願いいたします。

HTML

1<div id="meter"> 2<p id="bar"><span></span></p> 3<p id="now">now loading...</p><p id="percent"></p> 4</div>

CSS

1 2#meter { 3 4 position: absolute; 5 margin: auto; 6 7 top: 0; 8 right: 0; 9 bottom: 0; 10 left: 0; 11 12 width: 200px; 13 height: 30px; 14 15 z-index: 20; 16 17 18} 19 20 21#now { 22 23 position: absolute; 24 margin: auto; 25 26 top: 25px; 27 right: 0; 28 bottom: 0; 29 left: -40; 30 31 text-align: center; 32 font-size: 15px; 33 34 font-family: arial; 35 font-weight: bold; 36 37 color: #ffffff; 38 39 z-index: 20; 40 41} 42 43#percent { 44 45 position: absolute; 46 margin: auto; 47 48 top: 25px; 49 right: 0; 50 bottom: 0; 51 left: 95; 52 53 text-align: center; 54 font-size: 15px; 55 56 font-family: arial; 57 font-weight: bold; 58 59 color: #ffffff; 60 61 z-index: 20; 62 63} 64 65 66#bar { 67 68 position: absolute; 69 margin: 0 0 0 0; 70 71 width: 200px; 72 height: 15px; 73 74 text-align: center; 75 76 border:2px solid #ffffff; 77 background: #00FF00; 78 79 -webkit-border-radius: 20px; 80 -ms-border-radius: 20px; 81 82 z-index: 20; 83 84} 85 86#bar span{ 87 88 position: absolute; 89 margin: auto; 90 float: left; 91 92 top: 0; 93 94 bottom: 0; 95 left: 0; 96 97 background: #00FF00; 98 display: block; 99 height: 15px; 100 101 102 -webkit-border-radius: 20px; 103 -ms-border-radius: 20px; 104 z-index: 20; 105 106} 107

JavaScript

1$(document).ready(function() { 2 3 var xhr = new XMLHttpRequest 4 xhr.open('GET', 'index.html'); 5 xhr.onprogress = function (evt) { 6 7 var load = (100*evt.loaded/evt.total|0); 8 $('#percent').html(load + '%'); 9 $('#bar span').css({'width': load*2}); 10 }; 11 12 xhr.send(); 13 14});
shinoharat, dotnetuseryamag👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

onreadystatechange を追加すれば完了のイベントは取れます。

javascript

1$(document).ready(function() { 2 var xhr = new XMLHttpRequest 3 xhr.open('GET', 'index.html'); 4 xhr.onprogress = function (evt) { 5 var load = (100*evt.loaded/evt.total|0); 6 $('#percent').html(load + '%'); 7 $('#bar span').css({'width': load*2}); 8 }; 9 xhr.onreadystatechange = function (evt) { 10 if (xhr.readyState === 4) { 11 if (xhr.status === 200) { 12 alert('ダウンロード完了'); 13 } 14 } 15 } 16 xhr.send(); 17});

テテーン♪と表示されないのはダウンロードしているコンテンツが小さいのかと思います。

追記

大きいファイルで試した結果を置いておきます。

イメージ説明

投稿2017/07/05 02:28

編集2017/07/05 04:51
mattn

総合スコア5030

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

phiilo_

2017/07/05 03:40

ご回答ありがとうございます。 データが軽いから読み込みが一瞬で終わるんでしょうね。 頂いたコードですと0%となってしまうままのようです... 頑張ってみます。ありがとうございました。
mattn

2017/07/05 03:43

0 の次が 100 でしょうから、完了時に 100 を表示する様にした方がいいかもですね。
mattn

2017/07/05 04:51

キャプチャを貼りました。ちなみに450MBのファイルです。
phiilo_

2017/07/05 11:52

お返事が遅くなり申し訳ありませんでした。 確かに重たいデータを指定したら0%から値がインクリメントされ 100%あたりでテテーン♪となりました。 現状ではプログレッシブバーがデフォルトでマックスパワーゲージとなってしまい、mattnさんの.gifのようにピロピロピロ♪となりません。 HTMLでは<progress>というタグがあり関心しました。 色々見てみます。ありがとうございました。
guest

0

自己解決

CSSが間違っており、軽いデータだったため、値がインクリメントしていくのを
視認できなかったようです。

HTML

1<html> 2 3 4 <head> 5 6 <script> 7 8 $(document).ready(function() { 9 10 var client = new XMLHttpRequest(); 11 12 client.open('POST', './----.mov'); 13 client.onprogress = function(event) { 14 15 var load = (100*event.loaded/event.total|0); 16 $('#percent').html(load + '%'); 17 $('#bar span').css({'width': load + '%'}); 18 }; 19 20 client.send(); 21 }); 22 23 </script> 24 25 <style> 26 27 28 #percent { 29 30 position: absolute; 31 margin: auto; 32 33 top: 25px; 34 right: 0; 35 bottom: 0; 36 left: 95; 37 38 text-align: center; 39 font-size: 15px; 40 41 font-family: arial; 42 font-weight: bold; 43 44 color: #ffffff; 45 46 z-index: 20; 47 48 } 49 50 51 #bar { 52 53 position: absolute; 54 margin: 0 0 0 0; 55 56 width: 200px; 57 height: 15px; 58 59 text-align: center; 60 61 border:2px solid #ffffff; 62 63 64 -webkit-border-radius: 20px; 65 -ms-border-radius: 20px; 66 67 z-index: 20; 68 69 } 70 71 #bar span{ 72 73 position: absolute; 74 margin: auto; 75 float: left; 76 77 width: 200PX; 78 top: 0; 79 80 bottom: 0; 81 left: 0; 82 83 background: gray; 84 display: block; 85 height: 15px; 86 87 88 -webkit-border-radius: 20px; 89 -ms-border-radius: 20px; 90 z-index: 20; 91 92 } 93 </style> 94 </head> 95<body> 96 97<p id="bar"><span></span></p> 98<p id="percent"></p> 99 100</body> 101</html> 102

投稿2017/07/08 08:21

phiilo_

総合スコア85

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問