javascript - jquery と ajax を使用してファイルをアップロードするための進行状況バーを作成する

Question

jquery と ajax を使用してファイルをアップロードするためのプログレス バーを作成したいと思います。だから私は次のjqueryコードを書きました。

function updateProgress(evt)
{
    // evt is an ProgressEvent.
    if (evt.lengthComputable)
    {
        var percentLoaded = Math.round((evt.loaded / evt.total) * 100);
        // Increase the progress bar length.
        $(".progress > div").css(
        {
            width: percentLoaded + '%'
        });

    }
}

$.ajax(
{
    url: 'assets/php/upload.php?action=uploadFiles',
    type: 'POST',
    data: newFormData,
    cache: false,
    xhr: function ()
    {
        myXhr = $.ajaxSettings.xhr();
        if (myXhr.upload)
        {
            myXhr.upload.addEventListener('progress', updateProgress, false);
        }
        return myXhr;
    },
    contentType: false,
    processData: false,
});

しかし問題は、ファイルのアップロードがまだ完了していない間、進行状況バーが 1 秒で 100% になることです。私のコードの何が問題なのですか?

ありがとうございました、

アリレザ