javascript - FormData 进度停留在 1%

Question

我正在使用 this Stackoverflow question 中的代码。由于某种原因，当上传开始时，百分比值停留在 1%，上传完成后，PHP 脚本显示成功消息。

请指教，为什么百分比值停留在1%。

jQuery 代码

function updateProgress(evt){
    if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        $('form[data-submit="ajax_upload_mp3"] .validation').html( percentComplete + '% Completed').addClass('text-success');
    }
}

$(document).on('submit', 'form[data-submit="ajax_upload_mp3"]', function(){
    wrap = 'form[data-submit="ajax_upload_mp3"]';
    button = 'form[data-submit="ajax_upload_mp3"] .btn-primary';
    url = $(this).attr('action');
    form = $(this);
    formdata = new FormData(form[0]);
    $(wrap + ' .validation').html('').removeClass('text-danger text-success');
    $(wrap + ' .btn-primary').html('Uploading...').attr('disabled', true);
    $.ajax({
        url: url,
        data: formdata ? formdata : form.serialize(),
        cache: false,
        contentType: false,
        processData: false,
        type: 'POST',
        xhr: function(){
            myXhr = $.ajaxSettings.xhr();
            if(myXhr.upload){
                myXhr.upload.addEventListener('progress', updateProgress, false);
            }
            return myXhr;
        },
        success: function(data, textStatus, jqXHR){
            code = ajax_decode(data, 0);
            msg = ajax_decode(data, 1);
            if( code == 1 ){
                $(wrap + ' .validation').html(msg).addClass('text-success');
                $(wrap).trigger("reset");
            } else {
                $(wrap + ' .validation').html(msg).addClass('text-danger');
            }
            $(wrap + ' .btn-primary').html('Upload').attr('disabled', false);
        }
    }); 
    return false;
});

Answer 1

这里:

if (evt.lengthComputable) {
    var percentComplete = evt.loaded / evt.total;
}

它不是百分比(如 50%)，而是除法(如 0.5)
这就是为什么它永远不会超过 1。

如果要显示百分比，需要乘以100:

var percentComplete = evt.loaded / evt.total * 100;

就这么简单:)