带有 AJAX 的 Firefox 中的进度事件未达到 100%答案

【问题标题】：Progress event in Firefox with AJAX does not reach 100%带有 AJAX 的 Firefox 中的进度事件未达到 100%
【发布时间】：2013-07-29 17:11:44
【问题描述】：

我正在编写一个上传脚本，它将获取一个文件，对其进行处理，然后将其返回给用户。处理可能需要几分钟。我目前正在为用户提供反馈的操作是在实际上传期间显示上传栏，并在上传完成后将其替换为“处理”消息。文件完成处理后，该消息将替换为指向新文件的链接。这在 chrome 中运行良好，但在 Firefox 中，我只能将进度条调到 99.9%。有没有办法在关闭连接之前检查上传是否完成？

这是我目前拥有的

    outter = $(".item_box")[0];//content wrapper
    inner = outter.children[0];//content viewer, will be replaced with messages and content

    var p = document.createElement("progress");
    p.className = "uploadprogress";
    p.value = "0";
    p.max = "100";
    inner.textContent = "";
    inner.appendChild(p);//replace initial "click here" message with progress bar

    var formData new FormData();
    for (var i = 0; i < files.length; i++)//files is defined elsewhere and contains form data
    {
        formData.append('userfile', files[i]);
    }

    // now post a new XHR request
    var xhr = new XMLHttpRequest();
    xhr.open('POST', base_url+'upload/upload_media');//url of php script
    xhr.responseType = "json";
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4)//ajax request complete
        {
            p.value = p.innerHTML = 100;//set progress bar to 100%
            var data = JSON.parse(xhr.responseText);//my returned json object
            outter.removeChild(inner);
            var v = document.createElement("video");
            v.controls = "controls";
            v.innerHtml = data.msg;
            outter.appendChild(v);
        }
    }
    xhr.upload.onprogress = function (e)//handles progress bar value
    {
        if (e.lengthComputable)
        {
            var done = e.position || e.loaded, total = e.totalSize || e.total;
            p.value = p.innerHTML = (Math.floor(done/total*1000)/10);
            if (done == 100)//this never happens in firefox
            {
                inner.removeChild(p);
                inner.textContent = "processing... please wait";
            }
        }
    }
    xhr.send(formData);

【问题讨论】：

标签： ajax firefox upload progress

【解决方案1】：

这是 Firefox 中的一个奇怪问题，我也遇到过。我通过将我希望以 100% 进度执行的代码从onprogress 事件移动到xhr.readyState 来解决这个问题。我从 onprogress 事件中删除了它，因为如果我将它放在两个地方，我的代码会产生问题。

【讨论】：

【解决方案2】：

呃……Firefox 仍然没有修复这个错误。我在 FF 版本 28 中遇到了同样的问题。像 OP 一样，我不能移动从“onprogress”处理程序到“onload”处理程序的代码，因为“onload”在脚本完成处理上传的文件之前不会触发 - 这可能比文件完成上传时晚得多。上传的文件越小，FF 越早停止报告进度（例如：280K 文件可能会停止报告 84%，而 5 MB 文件可能会一直报告到 99% - 但永远不会 100%）。由于 OP 正在处理始终如一的大文件，他可以将他的条件设置为“（完成 == 99）”或一些类似的阈值。不幸的是，这对我或其他任何处理各种文件大小的人都不起作用。加油，火狐！

【讨论】：