FormData Progress stuck at 1%

329
November 21, 2016, at 7:56 PM

I am using the code from this Stackoverflow question. For some reason, when the upload starts the percentage value is stuck at 1% and after its completed uploading the success message shows from PHP Script.

Please advise, why is the percentage value stuck at 1%.

jQuery Code

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

Here:

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

It is not a percentage (like 50%), it is a division (like 0.5)
That's why it never exceeds 1.

If you want to display percentage, you need to multiply it by 100:

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

As simple as that :)

READ ALSO
Select2 template does not autocomplete when tagging

Select2 template does not autocomplete when tagging

I'm trying to use Select2. js version 4.

322
Lightbox works locally but cease to work on googledrive

Lightbox works locally but cease to work on googledrive

I plan on using this lightbox called ekko lightbox for my portfolio gallery. I'm following this tutorial here, https://www.

328
Animate during a range of values

Animate during a range of values

I created a cursor that animates its color when you move it. It goes from a shade of blue to a red.

312
keep div centered to viewport

keep div centered to viewport

I have a form within a container, when the user resizes the window I need to the form to move into the center of the container, and when he goes full screen it should return to the original position. .

297