XMLHttpRequest에서 진행 상황을 가져오는 방법
XMLHttpRequest(업로드 바이트, 다운로드 바이트)의 진행 상황을 얻을 수 있습니까?
사용자가 대용량 파일을 업로드할 때 진행 표시줄을 표시할 때 유용합니다.표준 API는 지원하지 않는 것 같습니다만, 혹시 어떤 브라우저에서도 비표준 확장이 있는 것은 아닐까요?클라이언트는 업로드/다운로드된 바이트 수를 알고 있기 때문에 이 기능은 매우 명백한 기능인 것 같습니다.
주의: "진보를 위한 서버 폴링" 대안에 대해 알고 있습니다(지금 하고 있습니다).(복잡한 서버측 코드 이외) 대부분의 ISP가 업스트림 상태가 좋지 않기 때문에 일반적으로 큰 파일을 업로드 할 때 사용자의 접속이 완전히 차단된다는 것입니다.그래서 추가 요청을 하는 것은 제가 기대했던 것만큼 반응이 좋지 않습니다.브라우저에 항상 있는 이 정보를 얻을 수 있는 (비표준적인) 방법이 있으면 좋겠다고 생각했습니다.
업로드된 바이트의 경우 매우 간단합니다.만 하면 돼요.xhr.upload.onprogress이벤트. 브라우저는 업로드해야 하는 파일의 크기와 업로드된 데이터의 크기를 알 수 있으므로 진행률 정보를 제공할 수 있습니다.
수(「」로 )xhr.responseText서버 요청으로 전송되는 바이트 수를 브라우저가 알 수 없기 때문에 조금 더 어렵습니다.이 경우 브라우저가 인식할 수 있는 것은 수신된 바이트 크기뿐입니다.
부분에 대한 이 정도면 합니다. VIP로 하시면 됩니다.Content-Length브라우저가 수신하는 바이트의 합계 사이즈를 취득하기 위해서, 서버 스크립트의 header 를 지정합니다.
상세한 것에 대하여는, https://developer.mozilla.org/en/Using_XMLHttpRequest 를 참조해 주세요.
예를 들어:서버 스크립트가 zip 파일을 읽습니다(5초 소요).
$filesize=filesize('test.zip');
header("Content-Length: " . $filesize); // set header length
// if the headers is not set then the evt.loaded will be 0
readfile('test.zip');
exit 0;
서버 스크립트의 전체 길이를 알기 때문에 다운로드 프로세스를 감시할 수 있습니다.
function updateProgress(evt)
{
if (evt.lengthComputable)
{ // evt.loaded the bytes the browser received
// evt.total the total bytes set by the header
// jQuery UI progress bar to show the progress on screen
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)
{
//run any callback here
}
};
req.send();
}
Firefox는 XHR 다운로드 진행률 이벤트를 지원합니다.
2021-07-08 10:30 PDT 편집
위의 링크는 불능입니다.Mozilla WebDev 사이트에서 검색하면 다음 링크가 나타납니다.
https://developer.mozilla.org/en-US/docs/Web/API/ProgressEvent
XMLHttpRequest에서 프로그레스이벤트를 사용하는 방법과 예를 나타냅니다.아래에 예를 제시하겠습니다.
var progressBar = document.getElementById("p"),
client = new XMLHttpRequest()
client.open("GET", "magical-unicorns")
client.onprogress = function(pe) {
if(pe.lengthComputable) {
progressBar.max = pe.total
progressBar.value = pe.loaded
}
}
client.onloadend = function(pe) {
progressBar.value = pe.loaded
}
client.send()
이 링크도 찾았습니다.원래의 링크가 가리키고 있었다고 생각합니다.
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/progress_event
가장 유망한 접근법 중 하나는 서버에 대한 두 번째 통신 채널을 열어 전송이 얼마나 완료되었는지 확인하는 것입니다.
업로드한 합계로는 대응할 방법이 없는 것 같습니다만, 다운로드하고 싶은 것과 비슷한 것이 있습니다.readyState가 3이면 responseText를 정기적으로 쿼리하여 다운로드된 모든 콘텐츠를 string으로 가져올 수 있습니다(IE에서는 동작하지 않음). 모든 콘텐츠를 사용할 수 있게 될 때까지 그 시점에서 readyState 4로 이행할 수 있습니다.특정 시간에 다운로드된 총 바이트 수는 responseText에 저장된 문자열의 총 바이트 수와 동일합니다.
업로드 질문에 대한 전체 또는 없음 접근 방식에서는 업로드하기 위해 문자열을 전달해야 하므로(또한 총 바이트 수를 결정할 수 있음) readyState 0 및 1에 대해 전송되는 총 바이트 수는 0이 되며, readyState 2에 대한 총 바이트 수는 전달된 문자열의 총 바이트 수가 됩니다.readyState 3과 4에서 송수신된 바이트의 합계는 원래 문자열의 바이트 합계와 responseText의 바이트 합계가 됩니다.
<!DOCTYPE html>
<html>
<body>
<p id="demo">result</p>
<button type="button" onclick="get_post_ajax();">Change Content</button>
<script type="text/javascript">
function update_progress(e)
{
if (e.lengthComputable)
{
var percentage = Math.round((e.loaded/e.total)*100);
console.log("percent " + percentage + '%' );
}
else
{
console.log("Unable to compute progress information since the total size is unknown");
}
}
function transfer_complete(e){console.log("The transfer is complete.");}
function transfer_failed(e){console.log("An error occurred while transferring the file.");}
function transfer_canceled(e){console.log("The transfer has been canceled by the user.");}
function get_post_ajax()
{
var xhttp;
if (window.XMLHttpRequest){xhttp = new XMLHttpRequest();}//code for modern browsers}
else{xhttp = new ActiveXObject("Microsoft.XMLHTTP");}// code for IE6, IE5
xhttp.onprogress = update_progress;
xhttp.addEventListener("load", transfer_complete, false);
xhttp.addEventListener("error", transfer_failed, false);
xhttp.addEventListener("abort", transfer_canceled, false);
xhttp.onreadystatechange = function()
{
if (xhttp.readyState == 4 && xhttp.status == 200)
{
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "http://it-tu.com/ajax_test.php", true);
xhttp.send();
}
</script>
</body>
</html>
Apache 설치 및 신뢰 타사 코드에 액세스할 수 있는 경우 apache 업로드 진행률 모듈을 사용할 수 있습니다(apache를 사용하는 경우 nginx 업로드 진행률 모듈도 있습니다).
그렇지 않으면 파일의 상태를 요구하기 위해 아웃오브밴드(예를 들어 tmp 파일의 파일 크기 확인)를 히트할 수 있는 스크립트를 작성해야 합니다.
파이어폭스 3에서는 몇 가지 작업이 진행되고 있습니다.브라우저에 업로드 진행률 지원을 추가할 수 있다고 생각합니다만, 그것이 모든 브라우저에 도입되어 널리 채용되는 것은 아닙니다(더 안타깝습니다).
순수한 Javascript를 사용하는 유일한 방법은 일종의 폴링 메커니즘을 구현하는 것입니다.서버가 수신한 바이트 수를 얻으려면 일정한 간격(예를 들어 5초마다)으로 Ajax 요청을 전송해야 합니다.
보다 효율적인 방법은 플래시를 사용하는 것입니다.Flex 컴포넌트 FileReference는 이미 업로드된 바이트 수를 유지하는 '진행 중' 이벤트를 정기적으로 디스패치합니다.javascript를 고수해야 할 경우 actionscript와 javascript 사이에 브릿지를 사용할 수 있습니다.좋은 소식은 이 작업이 이미 완료되었다는 것입니다:)
Flash Progress 이벤트에 Javascript 핸들러를 등록할 수 있는 라이브러리입니다.
이 솔루션에는 서버 측에서 추가 리소스를 필요로 하지 않는다는 장점이 있습니다.
언급URL : https://stackoverflow.com/questions/76976/how-to-get-progress-from-xmlhttprequest
'source' 카테고리의 다른 글
| 필드가 존재하지 않거나 null이거나 false인 MongoDB 문서를 선택하십시오. (0) | 2023.02.22 |
|---|---|
| Reactjs가 초점을 맞출 때 입력되는 모든 텍스트를 선택하려면 어떻게 해야 합니까? (0) | 2023.02.22 |
| 일반 상태 비저장 구성 요소 반응 유형?또는 일반 기능 인터페이스를 더 일반적이 되도록 타이프스크립트로 확장합니까? (0) | 2023.02.22 |
| MUI 스타일로 소품 전달 (0) | 2023.02.18 |
| Typescript에서 오류를 발생시키는 함수를 선언하는 방법 (0) | 2023.02.16 |