I'm trying to make a progression bar work, but I do not know what's happening, it does not give any errors on the console, but the progress bar does not 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>