アップロードされたバイトは非常に簡単です。 xhr.upload.onprogressイベントを監視するだけです。ブラウザは、アップロードしなければならないファイルのサイズとアップロードされたデータのサイズを知っているので、進捗情報を提供することができます。
ダウンロードしたバイト数（xhr.responseTextで情報を取得した場合）は、ブラウザがサーバーリクエストで送信されるバイト数を知らないため、少し難しいです。この場合、ブラウザが知っているのは、受信しているバイトのサイズだけです。
これには解決策があります。サーバースクリプトにContent-Lengthヘッダーを設定して、ブラウザが受信するバイトの合計サイズを取得すれば十分です。
詳細はhttps://developer.mozilla.org/en/Using_XMLHttpRequestを参照してください。
例： 私のサーバースクリプトは、zipファイル（それが5秒かかります）読み：私はそれが全体の長さを知っているので、
$filesize=filesize('test.zip');
header("Content-Length: " . $filesize); // set header length
// if the headers is not set then the evt.loaded will be 0
readfile('test.zip');
exit 0;
を今私は、サーバースクリプトのダウンロードプロセスを監視できます。
function updateProgress(evt)
{
if (evt.lengthComputable)
{ // evt.loaded the bytes the browser received
// evt.total the total bytes set by the header
// jQuery UI progress bar to show the progress on screen
var percentComplete = (evt.loaded/evt.total) * 100;
$('#progressbar').progressbar("option", "value", percentComplete);
}
}
function sendreq(evt)
{
var req = new XMLHttpRequest();
$('#progressbar').progressbar();
req.onprogress = updateProgress;
req.open('GET', 'test.php', true);
req.onreadystatechange = function (aEvt) {
if (req.readyState == 4)
{
//run any callback here
}
};
req.send();
}
私はリンクが注目に値する –