javascript - 为什么我的 HTML5 进度条没有随 jQuery AJAX 变化？

Question

我正在尝试为我的 jQuery/AJAX 上传脚本制作一个进度条。脚本中的所有内容都工作正常，除了进度条的值永远不会改变。另外，在控制台中，percentComplete 变量始终仅为 1，并且记录两次。我尝试了所有能找到的不同方法，但似乎没有任何效果。进度条本身已添加到我的 div 中，但仅此而已。

$.ajax({
    beforeSend : function(){
        $(settings.message_div).html('<progress id="#upload-progress" value="0" max="100"></progress>');
    },
    xhr: function()
    {
        var xhr = new window.XMLHttpRequest();
        //Upload progress
        xhr.upload.addEventListener("progress", function(evt){
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                //Do something with upload progress
                console.log(percentComplete);
                $('#upload-progress').val(percentComplete);
            }
        }, false);
        //Download progress
        xhr.addEventListener("progress", function(evt){
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                //Do something with download progress
                console.log(percentComplete);
                $('#upload-progress').val(percentComplete);
            }
        }, false);
    return xhr;
     },
    type: "POST",
    dataType: "xml",
    data: formData,
    url: settings.ajax_url,
    processData: false,
    contentType: false,
    cache: false,
    success: function(xml){
        //console.log('ajax called');
    },
    error: function(xhr){
        $(settings.message_div).html(xhr.responseText);
        //console.log(xhr.responseText);
    }
});

这取自 here

Answer 1

onprogress 最近应该可以工作。您看到的教程有点过时了。 http://www.html5rocks.com/en/tutorials/file/xhr2/
http://www.w3.org/TR/progress-events/#introduction

xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
  var progressBar = $('#upload-progress').get(0);
  progressBar.value = (e.loaded / e.total) * 100;
  progressBar.textContent = progressBar.value; // Fallback for unsupported browsers.
}