ProgressBar does not update according to request XMLHttpRequest - Jquery / Asp.net

Navigation
0

I'm building an application to upload videos and photos, and I'd like to put a ProgressBar to show the progress for the user, I found some questions to answer (#), but I'm having a bit of trouble understanding, so I could not do the ProgressBar function.

Here's 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 progressbar does not change, and at 70% it is already redirected as if it had already finished uploading, but not finished.

I've also tried a in a slightly different way , but did not work also did not work, this is the Listerner 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!

    
asked by anonymous 13.01.2017 / 13:54

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) + '%';
}

by: 

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 on the bootstrap ProgressBar , you must specify the css width , as per the above code.

I took advantage of and made a fiddle by simulating a progress upload with your code to test: link (the simulateProgress function is just the simulation, no need to worry about it)

    
13.01.2017 / 15:35
Intent. Filter program that appears in the "Open With" Problem with Menupop