XMLHttpRequest上传进度未正确触发

时间:2014-01-28 22:00:11

标签: javascript html5 xmlhttprequest

我正在尝试使用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);

1 个答案:

答案 0 :(得分:2)

好吧,我也遇到了这个问题,并且真的很惊讶为什么它花了很多时间在网上花了很多小时就没用了。有趣或令人沮丧的是,它在其他几乎相同设置的机器上完美运行。

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

希望这可以帮助那些面临同样问题而花费数小时痛苦的人......