ファイルの合計サイズがわからない場合、XMLHttpRequest でダウンロードの進行状況を追跡するにはどうすればよいでしょうか?

XMLHttpRequest の進行状況の監視

XMLHttpRequest (XHR) は、JavaScript から非同期リクエストを実行するメカニズムを提供します。 xhr.upload.onprogress イベントを使用したアップロードの進行状況の追跡はサポートされていますが、受信する合計バイト数に関する情報が不足しているため、ダウンロードの進行状況を取得することはそれほど簡単ではありません。

アップロードの進行状況の追跡

アップロードの進行状況を取得するのは比較的簡単です。ブラウザーは、アップロードされるファイルのサイズと転送されるデータ量に関する情報を維持するため、xhr.upload.onprogress イベントを通じて進行状況を取得できます。

ダウンロードの進行状況の監視

ダウンロードの場合、ブラウザが受信データのサイズを認識できないことから問題が発生します。ただし、これはサーバー応答に Content-Length ヘッダーを設定することで解決できます。これにより、転送されるデータの合計サイズが指定されます。

サーバー側の構成

サーバー側コンテンツの配信を担当するコードは、ダウンロードされるファイルまたはデータのサイズに基づいて Content-Length ヘッダーを設定する必要があります。例:

$filesize = filesize('test.zip');

header("Content-Length: " . $filesize); // Set header length
readfile('test.zip');
exit 0;

クライアント側の実装

Content-Length ヘッダーを設定すると、クライアント側のコードでダウンロードの進行状況を追跡できるようになります:

function updateProgress(evt) {
  if (evt.lengthComputable) {
    // evt.loaded: Bytes received by the browser
    // evt.total: Total bytes defined by the header
    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) {
      // Callback actions here
    }
  };
  req.send();
}

このコードは、jQuery UI ライブラリを使用して進行状況バーを作成し、データの受信時の進行状況のパーセンテージを表示します。 Content-Length ヘッダーを利用することで、ブラウザはダウンロードの進行状況を正確に計算して表示できるため、視覚的な進行状況インジケーターが必要な大きなファイルのダウンロードに役立ちます。

以上がファイルの合計サイズがわからない場合、XMLHttpRequest でダウンロードの進行状況を追跡するにはどうすればよいでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。