특히 대용량 파일 업로드 및 다운로드의 경우 XMLHttpRequest 작업 진행 상황을 추적하려면 어떻게 해야 합니까?

XMLHttpRequest 진행률 모니터링: 종합 가이드

표준 XMLHttpRequest(XHR) API에는 진행률 추적에 대한 기본 지원이 부족하여 대용량 파일 중에 진행률 표시줄을 표시하는 데 방해가 됩니다. 업로드. 그러나 수많은 브라우저는 진행 상황 모니터링을 가능하게 하는 비표준 확장 기능을 제공합니다.

업로드된 바이트

업로드된 바이트의 진행 상황을 모니터링하려면 xhr.upload.onprogress 이벤트를 활용하세요. . 브라우저는 업로드되는 파일의 크기와 이미 전송된 데이터의 양을 모두 알고 있으므로 업로드 진행 상황을 확인할 수 있습니다.

다운로드된 바이트

다운로드된 바이트의 진행 상황(xhr.responseText 사용 시)은 브라우저가 전송되는 데이터의 총 크기에 대한 사전 지식이 없기 때문에 더 복잡합니다. 한 가지 해결책은 서버 스크립트에 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!