총 파일 크기를 모르고 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!