Javascript 如何让进度条使用jQuery'；什么是AJAX函数？

我试图在AJAX文件上载期间显示进度条：

var data = new FormData();
    data.append('name', file.name); //something.jpg
    data.append('upload', blob); //data:image/jpeg;base64,/sd5a4de42qeasQW3123....

$.ajax({
    type: 'POST',
    url: '/path/to/server/',
    data: data,
    dataType: 'json',
    cache: false,
    processData: false,
    contentType: false,
    xhr: function() {

        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener('progress', function(e) {
            // THIS IS ONLY RUNS ONCE!!!
            if(e.lengthComputable) {
                $('#progressbar').css('width', (e.loaded / e.total) * 100 + '%');
            }
        }, false);
        return xhr;

    },
    beforeSend: function() {
        $('.preview').addClass('uploading');
    },
    success: function(response) {
        if(response.success) {
            $('.preview')
                .removeClass('uploading')
                .addClass('uploaded');
        } else {
            // Fail
        }
    },
    error: function() {
        //
    }
});

问题是进度条直接跳到100%，而不是逐渐上升1%…24%…50…等等

在上面的代码中，请查找此注释

//这只运行一次。如何使
进度
事件正确触发？
尝试：

$.ajax({
    type: 'POST',
    url: '/path/to/server/',
    data: data,
    dataType: 'json',
    cache: false,
    processData: false,
    contentType: false,
    beforeSend: function(xhr){
        xhr.upload.addEventListener('progress', function(e) {
            // THIS IS ONLY RUNS ONCE!!!
            if(e.lengthComputable) {
                $('#progressbar').css('width', (e.loaded / e.total) * 100 + '%');
            }
        }, false);
        return xhr;
        $('.preview').addClass('uploading');
    },
    success: function(response) {
        if(response.success) {
            $('.preview')
                .removeClass('uploading')
                .addClass('uploaded');
        } else {
            // Fail
        }
    },
    error: function() {
        //
    }
});

如果你想用CoreJS来做，请看看这个。为此，服务器脚本应该能够在中间阶段发送输出。