0

Estou tentando fazer uma barra de progressão funcionar, mas não sei oque está acontecendo, não dá erro nenhum no console, mas a barra de progressão não se mexe.

$(document).ready(function(){
    $('#js-upload-submit').click(function(){
        $('#js-upload-form').ajaxForm({
            uploadProgress: function(event, position, total, percentComplete) {
                $('progress').attr('value',percentComplete);
                $('#porcentagem').html(percentComplete+'%');
            },
            success: function(data) {
                $('progress').attr('value','100');
                $('#porcentagem').html('100%');
                if(data.sucesso == true){
                    $('#resposta').html('<img src="'+ data.msg +'" />');
                }
                else{
                    $('#resposta').html(data.msg);
                }
            },
            error : function(){
                $('#resposta').html('Erro ao enviar requisição!!!');
            },
            dataType: 'json',
            url: 'upload_book.php',
            resetForm: true
        }).submit();
    })
})

html:


    <div class="wrap-conteiner">
        <div class="container">
  <div class="panel panel-default">
    <div class="panel-heading"><strong>Biblioteca</strong> <small>Upload de livros</small></div>
    <div class="panel-body">

      <!-- Standar Form -->
      <h4>Selecione um livro do seu computador</h4>
      <form action="" method="post" enctype="multipart/form-data" id="js-upload-form">
        <div class="form-inline">
          <div class="form-group">
            <input type="file" name="files[]" id="js-upload-files" multiple>
          </div>
          <button type="submit" class="btn btn-sm btn-primary" id="js-upload-submit">Upload files</button>
        </div>
      </form>

      <!-- Drop Zone -->
      <h4>Ou arraste solte um livro abaixo</h4>
      <div class="upload-drop-zone" id="drop-zone">
        Arraste e solte aqui
      </div>

      <!-- Progress Bar -->
      <div class="progress">
          <progress class="sr-only"><span id="porcentagem"></span></progress>
      </div>

      <!-- Upload Finished -->
      <div class="js-upload-finished">
        <h3>Arquivos processados</h3>
        <div class="list-group">
          <a href="#" class="list-group-item list-group-item-success"><span class="badge alert-success pull-right">Success</span>image-01.jpg</a>
        </div>
      </div>
    </div>
  </div>
</div> <!-- /container -->
    </div>
0

1 Resposta 1

1

Pode fazer assim: altere os estilos do <progress> com:

<style>
progress{
   width: 100%;
   height: 20px;
}
</style>

E adicione beforeSubmit na função ajaxForm para resetar os valores:

beforeSubmit: function(){
   $('progress').attr('value','');
   $('#porcentagem').html('0%');
},
6
  • Como eu pego o responseText do jquery form, ele não retorna nada do ajax a não ser o uma lista.
    – Daniel
    26/11/2017 às 16:48
  • @Daniel Pode me mostrar como é essa lista?
    – Sam
    26/11/2017 às 16:55
  • eu vi agora que está vindo de uma lista da função error: prntscr.com/hfi0ca
    – Daniel
    26/11/2017 às 16:58
  • está retornando o meu texto "nofile" corretamente mas porque está na função error ?
    – Daniel
    26/11/2017 às 17:00
  • achei o erro, é porque eu coloquei datatype: "json" ao em vez de : contentType: 'multipart/form-data'
    – Daniel
    26/11/2017 às 17:06

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 .