0

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!

4
  • Bom dia, que biblioteca você está usando para a progressBar? pode nos mostrar onde a variável progressBar 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 um console.log(e.loaded); dentro do if (e.lengthComputable) { para checar se os valores esperados estão sendo recebidos.
    – luiscrjr
    13/01/2017 às 13:20
  • Estou usando a progress bar do Bootstrap, a variavel progressBar eu mesmo instaciei var progressBar = document.getElementById("progressBar"), Outra detalhe e que depois que o upload finaliza a progressbar vai enche completamente de uma vez, mas o numero em % corre normalmente. 13/01/2017 às 13:29
  • Você pode postar o resultado do debug sugerido acima? em relação a estas progressBar do bootstrap, o progresso dela é setado através do width, e você está setando value.
    – luiscrjr
    13/01/2017 às 13:39
  • ok um momento... 13/01/2017 às 13:40

1 Resposta 1

1

Tente substituir:

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

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

por:

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

Para setar um progresso no ProgressBar do bootstrap, você deve especificar o css width, conforme o código acima.

Aproveitei e fiz um fiddle simulando um upload progress com o seu código para testarmos: https://jsfiddle.net/mrlew/a4s3dn9m/ (a função simulateProgress é apenas a simulação, não precisa se preocupar com ela)

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .