One of the few things that I find lacking in PHP is the ability to report the progress of a file upload. This means that file uploads, especially uploads of larger files, can be extremely frustrating for end users when they don’t know if the upload is progressing or if it has stalled or if it has even started.

アップロードの進捗を表示しつつアップロードするサンプルが公開されています。

(ファイルを選択した時点でアップロードが開始されます)

仕組みとしては、不可視化したIFRAMEに対してFORMのSubmitを行い、ここでアップロードを行います。
(不可視のIFRAMEに対してSubmitを行うことで、画面の遷移を防ぐことが可能です。)
不可視のIFRAMEに対してSubmitを行った時点でJavascriptのコードも同時に起動し、prototype.js の Ajax.PeriodicalUpdater によって指定のDIVを定期的にAjax更新する形で進捗グラフを描画します。
この時、Ajaxで取得するのは、アップロード完了済みのバイト数で、この値を短い間隔でサーバに順次問い合わせることでリアルタイムに進捗グラフが描画できます。

該当ファイルのアップロード完了済みのバイト数を取得するためには、アップロードを実行したファイルを識別しないといけません。
そのため、アップロード開始時にファイルの識別子をサーバに送信しておき、問い合わせ毎にその識別子を指定してリクエストします。
そうすることで、目的のファイルのファイルサイズを得るような少々面倒な構造になっているようです。

サンプルファイルは、File & Linksの「You can download the complete source code here. 」の部分でダウンロードが出来ます。

実装はなかなか厄介ですが、結構技術的にも面白い部分ですし、こういった仕組みが必須なサービスってあると思いますのでチェックしておきましょう。