Iframeファイルのアップロードの進捗バー？

Question

私は現在、ページをリロードせずにファイルをアップロードできるWebアプリケーションを開発中です。これまでのところ、ユーザーがファイルを参照することができ、かつ入力が変更された場合、ファイルは以下のiframe技術を使用してアップロードされています

HTML：

<iframe name="iframe-target" src="./Image" style="display:none;"></iframe> 
<form method="POST" enctype="multipart/form-data" id="old-style-upload" target="iframe-target" action="./Image"> 
    <input type="file" name="files[]" multiple id="old-file-picker" > 
</form> 

Javascriptを/ jQueryの：

$('#old-file-picker').change(function() { 
    // Submit the form 
    $('#old-style-upload').submit(); 
}); 
$('iframe[name=iframe-target]').load(function() { 
    // Code that deals with the newly uploaded files 
    $('#old-style-upload').get(0).reset(); 
}); 

これは素晴らしいことですが、ユーザーはファイルがアップロードされているか、どれくらい時間がかかるかを知る方法がありません。ファイルのアップロードの進行状況を示すプログレスバーを作成する方法はありますか？

私が考えることができるのは、loading gifを表示することだけです。

Answer 1

これを行うには、通常のmultipart/form-dataフォーム投稿を使用する場合は、サーバー側にコードが必要です。クライアントのブラウザで実行されているJavaScriptに進捗をフィードバックできるもの見てくださいat this previously asked question。代わりに、Flashを使用しても構いません（しかし、そうしたいと思わないかもしれません）か、HTML 5です。その質問とthis question concerning XMLHTTPRequestsを見ることができます。