Progressbar does not update according to Xmlhttprequest request - Jquery/Asp.net

Asked

Viewed 436 times

0

I’m building an app to upload videos and photos, and I’d like to put a ProgressBar to show progress for the user, I found some questions to answer (Like this question), but I’m having a little trouble understanding, and so I couldn’t do the Progressbar work.

Here is my Progressbar:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <h4>Salvando as informações, Aguarde...</h4>
        </div>
        <div class="modal-body">
            <div class="progress ">
                <div id="progressBar" class="progress-bar active progress-bar-primary progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="1" style="width:0%">
                    <span id="display"></span>
                </div>
            </div>
        </div>
    </div>
</div>

And here’s my requisition:

 document.getElementById('formItem').onsubmit = function () {
    var formdata = new FormData(); //FormData object

    //Creating an XMLHttpRequest and sending
    var xhr = new XMLHttpRequest();
    xhr.addEventListener("load", transferComplete, false);
    xhr.addEventListener("error", transferFailed, false);

   xhr.open('POST', '/Unidade/Item/Cadastrar');


if (xhr.upload) {
            xhr.upload.onprogress = function (e) {
            if (e.lengthComputable) {
                progressBar.max = e.total;
                progressBar.value = e.loaded;

                display.innerText = Math.floor((e.loaded / e.total) * 100) + '%';
            }
        }
        xhr.upload.onloadstart = function (e) {
            progressBar.value = 0;
            display.innerText = '0%';
        }
        xhr.upload.onloadend = function (e) {
            var percentComplete = (e.loaded / e.total) * 100;
            $('#progressbar').progressbar("option", "value", percentComplete);
            loadBtn.innerHTML = 'Iniciando o Upload';
        }
    }

    xhr.send(formdata);
    return false;
}

In my tests it opens the modal and the percentage increases gradually, but the progression does not change, and the 70% is already redirected as if it had already finished the upload, but it is not finished.

I also tried a in a slightly different way, but it didn’t work either didn’t work, that’s the two Listerner that I have in the code:

function transferComplete(evt) {
    SucessoMensagem(' ', 'Cadastrado Com sucesso!')
    $('#myModal').hide();
    window.location.href = "/Unidade/Item?PaginaAtual=0&TipoItem=" + $("#Tipo").val() + "&CategoriaId=0";
}

function transferFailed(evt) {
    ErroMensagem(' ', 'Algo deu errado! Tente novamente,se o erro persistir,entre em contato.')
    window.location.href = "/Unidade/Item?PaginaAtual=0&TipoItem=" + $("#Tipo").val() + "&CategoriaId=0";
}

Thank you very much!

javascript jquery ajax progress-bar xmlhttprequest

  • Good morning, what library are you using for the progressBar? can show us where the variable progressBar is being instantiated? normally, for the progress of a Progress bar, you pass a float value between 0 and 1. A suggestion is to first debug the code by placing a console.log(e.loaded); within the if (e.lengthComputable) { to check if expected values are being received.

  • I am using the Bootstrap bar, the progression variableBar I have instacied var progressBar = Document.getElementById("progressBar"), Another detail and that after the upload completes the progressibar will fills completely at once, but the number in % runs normally.

  • Can you post the result of the above suggested debug? in relation to these bootstrap progressBar, its progress is set through width, and you are setting value.

  • okay a moment...

1 answer

1


Try to replace:

if (e.lengthComputable) {
    progressBar.max = e.total;
    progressBar.value = e.loaded;

    display.innerText = Math.floor((e.loaded / e.total) * 100) + '%';
}

for:

if (e.lengthComputable) {
     /* calcula o percentual baseado no e.loaded e e.total
   - multiplica por 100 por que queremos em forma de percentual para setar o width e o texto)
   - usa o Math.floor para pegar somente a parte inteira */
    var value = Math.floor((e.loaded / e.total) * 100);
    progressBar.style.width = value + "%";
    progressBar.innerText = value + "%";
}

To set a progress in Progressbar bootstrap, you must specify css width, according to the code above.

I took advantage and made a fiddle simulating an upload with your code to test: https://jsfiddle.net/mrlew/a4s3dn9m/ (the function simulateProgress It’s just the simulation, you don’t have to worry about her)

Browser other questions tagged javascript jquery ajax progress-bar xmlhttprequest

You are not signed in. Login or sign up in order to post.