XHR 업로드 진행률이 처음부터 100%입니다.

XHR 업로드 진행률이 처음부터 100%입니다.

나는 일부 파일을 php 스크립트에 업로드하기 위해 새로운 XMLHTTPRequestUpload 기능을 사용해 보고 있는데, 대부분 잘 작동하고, 업로드가 시작되고, 완료 응답 등을 받지만 진행 상황이 작동하지 않는 것 같습니다.

event.loaded 값을 보니 - firefox에서 나는 0과 파일 크기 사이에서 임의의 값을 얻는 것 같습니다. Chrome(내가 주로 일하는 곳)에서는 준비 상태가 '4'에 도달하지 않았고 Developer Tools 창에 로드할 파일이 여전히 표시됨에도 불구하고 총 파일 크기를 얻습니다.

무슨 생각 있어요?

여기 내 암호가 있습니다.

var xhr = new XMLHttpRequest()

xhr.upload.addEventListener('progress', function(event) {
    if (event.lengthComputable) {
        $('ajaxFeedbackDiv').innerHTML = event.loaded + ' / ' + event.total;
    }
}, false);

xhr.onreadystatechange = function(event) {
    if (event.target.readyState == 4) {
        updateFileList();
    }
};

xhr.open("POST", "_code/upload.php");
xhr.setRequestHeader("Cache-Control", "no-cache");
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xhr.setRequestHeader("X-File-Size", file.size);
xhr.setRequestHeader("X-File-Type", file.type);
xhr.setRequestHeader("Content-Type", "multipart/form-data");
xhr(file);

대단히 고맙습니다

벤

또한 최근 진행 중인 이벤트에 대한 XHR의 이벤트 청취자 설정에 어려움을 겪었습니다.저는 결국 익명 기능으로 구현하게 되었고, 이 기능은 아름답게 작동합니다.

xhr.upload.onprogress = function(evt)
{
    if (evt.lengthComputable)
    {
        var percentComplete = parseInt((evt.loaded / evt.total) * 100);
        console.log("Upload: " + percentComplete + "% complete")
    }
};

하지만 도중에 우연히 다른 많은 잡동사니들을 발견했기 때문에 그 중 하나가 제 이벤트 청취자를 방해했을 가능성이 높습니다.여기 있는 것과 제 설정의 다른 점은 xhr.sendAsBinary()를 사용하고 있다는 것입니다.

저도 비슷한 문제를 겪었습니다. 이벤트 핸들러의 기능은 다음과 같습니다.progress에 관한 사건.XMLHttpRequest업로드가 완료되었을 때 한 번만 실행되었습니다.

문제의 원인은 간단했습니다. 구글 크롬(다른 브라우저도 테스트하지 않았을 가능성이 있음)에서,progress업로드가 1~2초 실행된 경우에만 이벤트가 연속적으로 실행됩니다.다시 말해, 업로드가 빨리 완료되면 100% 하나만 받을 수 있습니다.progress이벤트성의

여기 코드의 예가 있습니다.progress이벤트는 100% 완료 시 한 번만 화재 발생(https://jsfiddle.net/qahs40r6/ ):

$.ajax({
  xhr: function()
  {
    var xhr = new window.XMLHttpRequest();
    //Upload progress
    xhr.upload.addEventListener("progress", function(evt){
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        console.log("Upload ", Math.round(percentComplete*100) + "% complete.");
      }
    }, false);
    return xhr;
  },
  type: 'POST',
  url: "/echo/json/",
  data: {json: JSON.stringify(new Array(20000))}
});

콘솔 출력:

Upload  100% complete.

그러나 어레이 크기에 0을 추가할 경우(페이로드 크기를 10배 증가시킬 경우) -- https://jsfiddle.net/qahs40r6/1/) :

$.ajax({
  xhr: function()
  {
    var xhr = new window.XMLHttpRequest();
    //Upload progress
    xhr.upload.addEventListener("progress", function(evt){
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        console.log("Upload ", Math.round(percentComplete*100) + "% complete.");
      }
    }, false);
    return xhr;
  },
  type: 'POST',
  url: "/echo/json/",
  data: {json: JSON.stringify(new Array(200000))}
});

그러면 당신은 정상적인 진행을 하게 됩니다.progress이벤트:

Upload  8% complete.
Upload  9% complete.
Upload  19% complete.
Upload  39% complete.
Upload  50% complete.
Upload  81% complete.
Upload  85% complete.
Upload  89% complete.
Upload  100% complete.

이 동작은 인터넷 연결 속도에 따라 달라지므로 주행 거리가 달라집니다.예를 들어, 첫 번째 예를 들어 Chrome Developer Tools를 사용하여 시뮬레이션된 "Slow 3G"로의 연결 속도를 늦추면 다음과 같은 일련의progress사건.

마찬가지로 로컬에서 개발하고 로컬 웹 서버에 데이터를 업로드하는 경우에는progress바로 업로드가 완료되기 때문에 이벤트가 발생합니다.◦ @yonjesdev가 localhost와 remote prod 배포에서 보았던 같습니다 것과 brett 이는 같습니다 brett 것과 보았던 prod host ones

저도 비슷한 문제가 있어서 이유를 찾았습니다.내 경우 문제아는 내 PC의 바이러스 백신(비트디펜더)입니다.비트 디펜더 보호를 끄면 진행률이 정확히 동작합니다.

언급URL : https://stackoverflow.com/questions/3352555/xhr-upload-progress-is-100-from-the-start