XMLHttpRequest 操作、特に大きなファイルのアップロードとダウンロードの進行状況を追跡するにはどうすればよいですか?

XMLHttpRequest の進行状況の監視: 総合ガイド

標準の XMLHttpRequest (XHR) API には進行状況追跡のサポートが組み込まれていないため、大きなファイル中に進行状況バーを表示する作業が妨げられます。アップロードします。ただし、多くのブラウザは、進行状況の監視を可能にする非標準の拡張機能を提供しています。

アップロードされたバイト数

アップロードされたバイト数の進行状況を監視するには、xhr.upload.onprogress イベントを利用します。 。ブラウザは、アップロードされるファイルのサイズとすでに送信されたデータ量の両方を認識しているため、アップロードの進行状況を判断できます。

ダウンロードされたバイト数

ブラウザーは転送されるデータの合計サイズを事前に認識していないため、ダウンロードされるバイト数の進行状況 (xhr.responseText を使用する場合) はより複雑になります。解決策の 1 つは、サーバー スクリプトに Content-Length ヘッダーを設定して、予想される合計バイト サイズを指定することです。

たとえば、サーバー スクリプトが 5 秒の ZIP ファイルを読み取る場合、ヘッダーを次のように設定できます。 :

<code class="php">$filesize = filesize('test.zip');
header("Content-Length: " . $filesize); // Set header length
readfile('test.zip');
exit 0;</code>

ヘッダーを設定することにより、ブラウザは応答の全長を決定し、それに応じて受信バイトを監視できます。

イベント監視

アップロードとダウンロードの両方の進行状況を監視するには、次のイベント リスナーを使用します。

<code class="javascript">// Event listener for upload progress
xhr.upload.onprogress = function(evt) {
  if (evt.lengthComputable) {
    var uploadPercentage = (evt.loaded / evt.total) * 100;
    // Update progress bar or display percentage
  }
};

// Event listener for download progress
xhr.onprogress = function(evt) {
  if (evt.lengthComputable) {
    var downloadPercentage = (evt.loaded / evt.total) * 100;
    // Update progress bar or display percentage
  }
};</code>

例

この例では、次を使用してファイルのダウンロード中の進行状況を監視します。 jQuery UI のプログレス バー:

<code class="javascript">function updateProgress(evt) {
  if (evt.lengthComputable) {
    var percentComplete = (evt.loaded / evt.total) * 100;
    $('#progressbar').progressbar("option", "value", percentComplete);
  }
}

function sendRequest() {
  var req = new XMLHttpRequest();
  $('#progressbar').progressbar();
  req.onprogress = updateProgress;
  req.onloadstart = function() {
    updateProgress({ loaded: 0, total: 0 });
  };
  req.open('GET', 'test.php', true);
  req.send();
}

// Sending the request
sendRequest();</code>

これらの手法を組み込むことで、XMLHttpRequest 操作の進行状況を効果的に監視でき、大規模なファイル転送中のよりユーザー フレンドリーなエクスペリエンスが可能になります。

以上がXMLHttpRequest 操作、特に大きなファイルのアップロードとダウンロードの進行状況を追跡するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。