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

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アドレスが正当な文字列か判定するためのバリデーション処理を実装します。 基本的...

rbenv環境でRuby on Railsのアプリケーションを一瞬で自動生成

アプリケーション構築時に最初に行う手順 概要 アプリケーションを作成するまでの手順を記載しています。 rbenvなどの環境が設定済と仮定して話を進めま...

Rails devise・authority・rolifyで権限付きの認証機能

devise・authority・rolify 概要 3つのGemを使用して、権限付き認証機能を実装します。 gem インストール Gemfile ...
トップへ戻る