xmlhttprequest 在函数中无法正常工作答案

【问题标题】：xmlhttprequest does not work properly in functionxmlhttprequest 在函数中无法正常工作
【发布时间】：2012-03-31 06:13:07
【问题描述】：

有谁知道为什么 upload.onprogress 在单独的功能上不能正常工作？

代码正常工作（进度条缓慢移动）：

        xhr.upload.onprogress = function(e) {
            if (e.lengthComputable) {
                progress.value = (e.loaded / e.total) * 100;
            }
        };

但如果我把它放到函数中，它就不再起作用了：

xhr.upload.onprogress = uploadProgress(event);

function uploadProgress(e) {
    if (e.lengthComputable) {
        progress.value = (e.loaded / e.total) * 100;
    }
}

在第二个代码中，进度条在文件上传完成后直接跳到 100%，而不是在上传过程中很好地移动到 100%

所以，我已经尝试了提供的解决方案，如果我将函数放入其中，它确实有效。有没有办法把它放在函数之外？

        function uploadFile(blobFile, fileName) {
            ...
            ...

            // Listen to the upload progress for each upload.
            xhr.upload.onprogress = uploadProgress;

            // Progress Bar Calculation why it has to be in uploadFile function..
            function uploadProgress(e) {
                if (e.lengthComputable) {
                    progress.value = (e.loaded / e.total) * 100;
                }
            }                            

            uploaders.push(xhr);
            xhr.send(fd);
        }  

        //it does not work if I put it outside the function. is there anyway to do this?  
        function uploadProgress(e) {
             if (e.lengthComputable) {
                 progress.value = (e.loaded / e.total) * 100;
             }
        }

【问题讨论】：

标签： php ajax html file-upload xmlhttprequest

【解决方案1】：

使用uploadProgress(event);，您调用函数本身并将返回值分配给xhr.upload.onprogress，而不是将其分配为回调函数：

xhr.upload.onprogress = uploadProgress;

【讨论】：

你是对的.. 可变进度在 uploadFile() 中。这就是为什么它不起作用。在javascript中有什么好的做法，而不是将其作为函数内部的函数......这看起来很糟糕。因为 var progress = document.createElement('progress');应该在 uploadFile() 内，因此每次调用它都会产生几个进度条。因此我不能让它成为全局变量
@user1096900 您可以使用匿名函数：xhr.upload.onprogress = function(e){} 或仅使用匿名包装函数：xhr.upload.onprogress = function(e){ uploadProgress(e, progress);}。

【解决方案2】：

在第二个例子中你应该使用

xhr.upload.onprogress = uploadProgress;

不是

xhr.upload.onprogress = uploadProgress(event);

您已经分配了调用函数的结果，而不是对该函数的引用。

【讨论】：

@ComFreek 我试过了，但它仍然无法正常工作。上传完每个chunk后还是直接跳到100%。
将 xhr.upload.onprogress 行放在函数之后，提升可能是代码中的一个因素。
@ComFreek，请查看我的更新代码。那么，有没有办法把它放在函数之外？还是不可能？谢谢
@user1096900 请评论我的回答，否则我不会收到任何通知。您确定变量progress 在函数uploadFile 之外可用还是只是一个局部变量？

【解决方案3】：

在分配为回调之前定义函数怎么样？ JavasCript 在以后定义函数时有时会出现问题。

我的意思是你可以替换：

// Listen to the upload progress for each upload.
xhr.upload.onprogress = uploadProgress;

// Progress Bar Calculation
function uploadProgress(e) {
    if (e.lengthComputable) {
         progress.value = (e.loaded / e.total) * 100;
    }
}

与

// Progress Bar Calculation
function uploadProgress(e) {
    if (e.lengthComputable) {
         progress.value = (e.loaded / e.total) * 100;
    }
}
// Listen to the upload progress for each upload.
xhr.upload.onprogress = uploadProgress;

【讨论】：