XMLHttpRequest 上传进度未正确触发

问题描述

我正在尝试使用 XMLHttpRequest 发送文件，它正在工作，但我的进度监视器不工作.

I'm trying to send a file using XMLHttpRequest, which is working, but my progress monitor is not working.

我尝试上传一个 700KB 的文件和一个 3MB 的文件，但遇到了同样的问题."progress" 事件触发一次，并且只触发一次，它表示 event.loaded 和 event.total 始终相同.上传需要足够的时间，但事件只触发一次.

I've tried uploading a 700KB file and a 3MB file and I get the same issue. the "progress" event fires once, and only once, and it says that the event.loaded and event.total is always the same. It takes an adequate amount of time to upload but the event only fires once.

在 chrome 和 firefox 中测试过同样的问题.以下是事件的控制台日志

Tested in chrome and firefox with the same issues. Below is a console log of the event

XMLHttpRequestProgressEvent {totalSize: 764277, position: 764277, total: 764277, loaded: 764277, lengthComputable: true…}
bubbles: false
cancelBubble: false
cancelable: true
clipboardData: undefined
currentTarget: XMLHttpRequestUpload
defaultPrevented: false
eventPhase: 0
lengthComputable: true
loaded: 764277
position: 764277
returnValue: true
srcElement: XMLHttpRequestUpload
target: XMLHttpRequestUpload
timeStamp: 1390945794935
total: 764277
totalSize: 764277
type: "progress"
__proto__: XMLHttpRequestProgressEvent

这是我的源代码 javascript

And here's my source javascript

var formData = new FormData();
formData.append('file', file);

var xhr = new XMLHttpRequest();

xhr.upload.addEventListener("progress", function(e) {
    console.log(e);
}, false);

xhr.onload = function () {
    if (xhr.status === 200) {
        console.log('done');
    } 
    else if (xhr.status == 403) {
        console.log('forbidden');
    }
    else {
        console.log('error');
    }
};

xhr.open("POST", '/upload.php');
xhr.send(formData);

推荐答案

好吧，我也遇到了这个问题，我真的很惊讶为什么在网上花了很多时间后它仍然不起作用.有趣或令人沮丧的是，它确实可以在具有几乎相同设置的其他机器上完美运行.

Alright, I had this issue too and was really suprised why it did not work after spending many hours on this with many examples from the net. Funny or depressing thing was, that it did work perfectly on other machines with almost the same setup.

我发现我的 防病毒程序 导致了这个问题.例如，如果您使用 AVG，则有一个称为 LinkScanner 的功能.如果这是 enabled，它将不会正确调用 XMLHttpRequest.upload.progress 事件.我确信其他防病毒程序中还有其他基于 Web 的功能会影响此功能.

I found out that my antivirus program was causing this issue. For example if you use AVG, there is a feature called LinkScanner. If this is enabled it will not call the XMLHttpRequest.upload.progress event properly. I am sure there are other web based features in other antivirus programs that can influence this functionality.

希望这可以帮助面临同样问题并花费数小时痛苦的其他人......

Hope this might help others who face the same issue and spent hours of pain...

这篇关于XMLHttpRequest 上传进度未正确触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！