Jquery ajax上传进度事件行为

Question

我正在尝试使用ajax上传文件时显示进度条 为此，我以这种方式使用了XMLHttpRequest。

$.ajax ({
    url: test.php, <-- upload files and return true
    data: formData,
    cache: false,
    contentType: false,
    processData: false,
    type: "POST",
    success: function (data) {
        if (data) console.log("OK");
    },
    xhr: function() {
        var xhr = new window.XMLHttpRequest();
        var percentComplete = 0;
        console.log(percentComplete);
        xhr.upload.addEventListener( "progress", function ( evt ) {
        if ( evt.lengthComputable ) {
                percentComplete = evt.loaded / evt.total;
                percentComplete = parseInt(percentComplete * 100);
                console.log(percentComplete);
            }
        }, false );
        return xhr;
    }
});

不幸的是，我注意到几秒钟后成功的结果 xhr percentComplete等于100。

CONSOLE LOGS

0
24 (or other number between 1 and 99)
100
..and than after a few second
OK

我希望当ajax调用成功结束时，percentComplete等于100。

我该怎么办？谢谢