XMLHttpRequest上传进度不正确地触发

Question

我正在尝试使用XMLHttpRequest发送文件，虽然它能工作，但我的进度监视器却无法工作。我尝试上传了一个700KB和一个3MB的文件，但遇到了同样的问题:“progress”事件只触发一次，并且事件中的event.loaded和event.total总是相同的。上传需要适当的时间，但事件只触发一次。在Chrome和Firefox中测试时出现了相同的问题。以下是事件的控制台日志。

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源代码

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

- ActionJackson

---

客户端和服务器在同一台机器上吗？ - Ray Nicholus

@RayNicholus 我遇到完全相同的问题，而且是它们..这可能是问题吗？ - Melbourne2991

Answer 1

嗯，我也遇到了这个问题，花费了很多时间在网上找了很多例子，但仍然无法解决。有趣或者令人沮丧的是，几乎相同设置的其他机器上都可以正常工作。

后来我发现我的杀毒程序导致了这个问题。例如，如果您使用AVG，它有一个名为LinkScanner的功能。如果启用了这个功能，将不能正确调用XMLHttpRequest.upload.progress事件。我相信其他杀毒程序中可能还有其他基于Web的特性会影响此功能。

希望这能帮助其他遇到同样问题并花费数小时煎熬的人们...

- Avinor

---

谢谢！我们有一个客户运行了一些反病毒软件，抱怨我们的工具出了问题。通过这个评论，我们找到了问题的根源。所以，不用花费数天的调试，只需要大约两个小时就解决了 ;) - dlrust