progress bar does not work jquery

Question

I’m trying to make a progress bar work, but I don’t know what’s going on, there’s no error in the console, but the progress bar doesn’t move.

$(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>

Answer 1

Here’s what you can do: change the styles of <progress> with:

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

And add beforeSubmit in function ajaxForm for reset the values:

beforeSubmit: function(){
   $('progress').attr('value','');
   $('#porcentagem').html('0%');
},