PHP 読込やアップロード状況を確認するプログレスバーを実装

プログレスバー
2014/02/07

プログレスバーの表示

概要

iframeを使って、プログレスバーを表示する方法を紹介します。
iframeでプログラムを実行し、そこから親画面のプログレスバーを操作するだけです。

少し古いやり方ですね。。。
HTML5では、progressタグを使って簡単にプログレスバーを表示できますよ。

サンプルコード

HTML

プログレスバーのデザインは、各自行う必要があります。


<div class="progress-area">読み込み中...<br />
<div class="progress-bar">
<div id="progress" class="progress-info" style="width: 0%"></div>
</div>
</div>
<iframe style="display:none;" name="progress_frame" src="hoge.php"></iframe>

hoge.php

iframeで実行するプログラムです。iframeで呼ばれた画面から親画面を指定する場合は、parentを使います。


$count = 10;
for($i=1;$i<=$count;$i++) {
	echo '<script type="text/javascript">// <![CDATA[
		$("#progress", parent.document).css("width","' . ceil($i / $count * 100) . '%");
		// ]]></script>';

	flush();
	ob_flush();
}
Related

Vagrant+Docker+PHP環境で「session.save_path」指定時に、セッションファイルが空になるエラー

ファイル共有でのフォルダの所有者を設定 結論 PHP5.4.28 からセッションファイルのownerはrootもしくはWebサーバのユーザに限るという制限が...

LINEと連携したテイクアウト事前注文システム徹底比較!

目次 テイクアウト予約・注文受付システムのトレンド LINEと連携したテイクアウト事前注文システムの価格表 L.B.B.Cloud テイクイーツ ...

PHPで動画の撮影日を取得

PHPで動画の撮影日を取得 概要 PHPからffprobeコマンドを実行し、動画の撮影日時を取得します。 コード $posted_at = ...

FullCalendarでGoogleカレンダーのようなUIを実装

jQueryプラグインFullCalendarのサンプル 概要 FullCalendarを使用して、GoogleカレンダーのようなUIを実装する使用例を...

PHP Laravel5.2でmulti-auth(複数テーブルでの認証)を実装

Laravel5.2でマルチ認証 概要 LaravelとはPHPの中で今最も伸びているフレームワークです。 処理速度が遅いなどありますが、かなり使い安く拡...

PHP 正規表現でIPアドレス形式の文字列か判定

正規表現でIPアドレスの入力チェック 概要 フォームで入力されたIPアドレスが正当な文字列か判定するためのバリデーション処理を実装します。 基本的...
トップへ戻る