XHR onProgress 完成答案

【问题标题】：XHR onProgress completedXHR onProgress 完成
【发布时间】：2013-04-03 23:50:58
【问题描述】：

我正在尝试使用 ajax 实现一个带有上传百分比的标签。问题是xhr返回100%后，到readyState==4和status==200还需要17秒左右。

我正在使用 FormData() 对象发送图片 (png/jpg) 和字符串

<form onclick='send(this)'....

功能是：

function send(form){ var f = new FormData(form).......

我正在使用以下代码进行上传

if(xhr.upload) {
    xhr.upload.onprogress = function(e) {
        if (e.lengthComputable) {
            var perc = Math.round((e.loaded/e.total) * 100);
            var state = {
                'done': e.loaded,
                'total': e.total,
                'percent': perc
            };
            progress(state);
        }
    };
}

【问题讨论】：

旧方法...如果 readystate!=4 将是 99%
那么这完全正常吗？还是我做错了什么？
不正常。你应该满足用户。是吗。如果它实际上没有结束并且它显示 100% 那是不正确的。所以显示 99% 直到结束。
是的，我知道。我的意思是，如果百分比在显然没有完成的情况下返回 100% 的事实一直发生，或者我的代码被破坏了？

标签： javascript ajax xmlhttprequest progress

【解决方案1】：

这很可能是您的服务器的问题，而不是您的客户端代码。只有在服务器返回对基础请求的响应后，您的 onreadystatechange 处理程序才会以 readyState 值 4 被调用。传递给onprogress 处理程序的加载/总计值指示已发送到服务器的字节数。如果总 === 已加载，这并不一定表明服务器已返回响应。服务器可能会在收到最后一个字节后执行一些处理，然后返回响应（触发您的onreadstatechange 处理程序）。如果您注意到发送最后一个字节和调用onreadystatechange 处理程序之间的时间很长，这表明您的服务器无论出于何种原因都在花时间响应请求。

【讨论】：