プログレスバー付きの XMLHttpRequest を使用してファイルをダウンロードする次のコードがあります。
編集:
目的は、ギガビット速度と一般的な 10 Mbps 接続の違いを実証することです。ユーザーは、大きなビデオ ファイルを 1 つにまとめて Mac にダウンロードします。
ページにプログレス バーが表示され、数秒でファイルがディスクに保存されます...その後、ユーザーはハードウェア スイッチを 10Mbps に制限して再度ダウンロードを有効にします。今回は、330MB ファイルの転送を確実に中止します。
PHP (download.php):
<?
$file='/path/to/some/video.mp4';
header('Content-Description: File Transfer');
header('Content-Type: video/mp4');
header('Content-Disposition: attachment; filename='.basename($file));
header('Content-Transfer-Encoding: binary');
header('Content-Length: ' . filesize($file));
header('Expires: 0');
header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
header('Pragma: public');
ob_clean();
flush();
readfile($file);
?>
JavaScript:
var req = new XMLHttpRequest();
req.onprogress=updateProgress;
req.open('GET', 'download', true);
req.setRequestHeader("Content-Type","video/mp4");
req.onreadystatechange = function (aEvt) {
if (req.readyState == 4) {
...
}
};
req.send();
function updateProgress (evt) {
console.log(evt);
var percentComplete = Math.round(evt.loaded * 100 / 330581733);
$('#downloadProgress').val(percentComplete);
$('#progressVal').html(percentComplete.toString() + '%');
}
私のリクエストには、 $filsize がエコーされたときに... 330581733 (330MB といくつかの変更) を読み取る Content-Length を除くすべてのヘッダーが含まれています。私の進行状況関数は、テスト目的で正確な数値を使用しますが、evt.total にする必要があります。
パート 1: Content-Length ヘッダーが利用できないのはなぜですか?
パート 2: ダウンロードが完了したら、なぜ開かないのですか? どこに行くのですか?