Estou construindo uma aplicação para subir videos e fotos, e gostaria de colocar uma ProgressBar
para mostrar o progresso para o usuário, achei algumas perguntas a responde (Como esta pergunta), mas estou tendo um pouco de dificuldade no entendimento, e por isso não consegui fazer a ProgressBar funcionar.
Aqui está minha 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>
E aqui está minha requisição:
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;
}
Nos meu testes ele abre a modal e os a porcentagem aumentA gradualmente, mas a progressbar não muda, e ao 70% já é redirecionado como se já tivesse terminado o upload, mas não terminou.
Eu também tentei de uma de uma forma um pouco diferente, mas não funcionou também não funcionou, esse são os dois Listerner
que tenho no codigo:
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";
}
Muito Obrigado!
progressBar
? pode nos mostrar onde a variávelprogressBar
está sendo instanciada? normalmente, para o progresso de uma progress bar, você passa um valor float entre 0 e 1. Uma sugestão é, primeiro, debugar o código colocando umconsole.log(e.loaded);
dentro doif (e.lengthComputable) {
para checar se os valores esperados estão sendo recebidos.