Jquery：进度条不起作用答案

【问题标题】：Jquery: Progress bar not workingJquery：进度条不起作用
【发布时间】：2014-05-29 08:08:23
【问题描述】：

我已经编写了一个 ajax 函数来上传一个文件，它可以工作，但进度条没有显示文件上传的进度。文件上传后进度条会显示 100%，但在文件完全上传之前不会显示任何进度。

function ajaxfilefn(path, sdata, progressbar)
{

function progressHandler (e)
{
     $(progressbar).prop({value: e.loaded, max: e.total});
}

return $.ajax({
    url: path,
    xhr: function () { 
        var custom_xhr = $.ajaxSettings.xhr();
        if (custom_xhr.upload){custom_xhr.addEventListener('progress', progressHandler, false);}
        return custom_xhr;
    },
    method: "post",
    data: sdata,
    dataType: "json",
    cache: false,
    contentType: false,
    processData: false

});
}

我错过了什么吗？

【问题讨论】：

你上传文件的方法是什么？我相信有些方法不会触发进度
我正在使用上面的函数将发布数据发送到 php 脚本，然后执行 move_uploaded_file 函数。
更新进度条的属性会改变它的状态吗？通常没有。
另外，请注意有两个不同的进展阶段。上传，然后响应。除非响应非常大，否则响应不会显示进度。您可能想知道上传的进度（也就是在 .upload 中添加一个事件侦听器）请参阅此处了解更多信息：developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/…
谢谢你，我没有意识到我没有将我的监听器进度函数添加到 xhr.upload。现在我修复了它，它现在可以工作了。

标签： jquery

【解决方案1】：

有两个不同的进度阶段：上传，然后是响应。您当前正在听的是响应。要收听上传，请将事件添加到 xhr.upload 对象。

...(custom_xhr.upload.addEventListener('progress',...

【讨论】：