XHR上傳進度從一開始就100％

我正在嘗試新的XMLHTTPRequestUpload功能來上傳一些文件到一個PHP腳本，它大多工作正常，上傳開始，我得到完成響應等 - 但進展doesn似乎沒有用。XHR上傳進度從一開始就100％

尋找event.loaded值 - 在Firefox中，我似乎得到0和文件大小之間的隨機值;在Chrome中（我大部分都在工作），即使readystate未達到'4'，開發工具窗口仍顯示要加載的文件，我仍可以獲得文件總大小？

任何想法？

繼承人我的代碼：

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);

非常感謝

本

來源

2010-07-28 Ben Robinson

您是否發現問題的解決方法或解決方法？我目前遇到同樣的情況，但它似乎取決於您的網絡連接。它在一個位置按預期工作，並從另一個位置跳到100％。 – unclenorton 2011-07-07 14:45:09

我遇到了同樣的問題。有趣的是，這似乎只發生在我在本地主機上運行時 - 當我部署到我們的dev或prod服務器時，加載的值會像預期的那樣回來。 – brettjonesdev 2014-02-05 18:04:14

我最近也有一定的難度設置XHR onprogress事件的事件偵聽器。我最終實現它作爲一個匿名函數，它精美的作品：

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

我遇到沿途其他陷阱，雖然的很多迷迷糊糊的，所以它很可能其中的一個被絆倒了我的事件監聽器。你在那裏和我的設置之間唯一的區別是我使用的是xhr.sendAsBinary（）。

來源

2011-03-30 09:52:41

我自己遇到了類似的問題，其中我的progress事件的事件處理函數XMLHttpRequest僅執行一次 - 上傳完成時。

結束了簡單的問題的原因 - （可能是其他瀏覽器也一樣，我沒有測試）在谷歌瀏覽器，該progress事件將導致上載已經運行了一兩秒鐘，只陸續火災。換句話說，如果您的上傳速度很快，那麼您很可能會收到一個100％的事件。

這裏是代碼的例子，其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.

但是，如果你添加一個額外零大小（增加有效載荷大小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.

此行爲取決於您的Internet連接速度有多快，所以你的里程可能會有所不同。例如，如果您拿第一個示例並使用Chrome開發人員工具減慢與模擬「慢速3G」的連接，那麼您將看到一系列progress事件。

同樣，如果您正在本地開發並將數據上傳到本地Web服務器，您可能永遠不會看到progress事件，因爲上傳將立即完成。這可能是@brettjonesdev在本地主機和遠程產品部署中看到的。

來源

2017-11-10 18:39:49

XHR上傳進度從一開始就100％

回答

相關問題