Olá a todos.!
eu estou fazendo um sistema de uploads, onde utilizo um plugin jquery que faz essa funcao (Jquery Filer), e eu preciso fazer uma barra de progresso do upload, que é enviado por ajax para o php. O upload, e o front estao funcionando, só resta a barra de progresso.
eu queria fazer uma que utilizasse somente javascript, algo com listener (eu acho), só que ja pesquisei um monte e ja tentei uns codigos de outros, só que nada funcionou.
Na propria documentação do plugin tem uma menção à ProgressBar, só que eu nao consegui, e nao acho ninguem que conheca esse plugin pra me dar uma luz. segue o código que eu fiz...
$('.file_input').filer({
maxSize: 5120,
limit: 10,
showThumbs: true,
templates: {
box: '<ul class="jFiler-item-list"></ul>',
item: '<li class="jFiler-item">\
<div class="jFiler-item-container">\
<div class="jFiler-item-inner">\
<div class="jFiler-item-thumb">\
<div class="jFiler-item-status"></div>\
<div class="jFiler-item-info">\
<span class="jFiler-item-title"><b title="{{fi-name}}">{{fi-name | limitTo: 25}}</b></span>\
</div>\
{{fi-image}}\
</div>\
<div class="jFiler-item-assets jFiler-row">\
<ul class="list-inline pull-left">\
<li><span class="jFiler-item-others">{{fi-icon}} {{fi-size2}}</span></li>\
</ul>\
<ul class="list-inline pull-right">\
<li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\
</ul>\
</div>\
</div>\
</div>\
</li>',
itemAppend: '<li class="jFiler-item">\
<div class="jFiler-item-container">\
<div class="jFiler-item-inner">\
<div class="jFiler-item-thumb">\
<div class="jFiler-item-status"></div>\
<div class="jFiler-item-info">\
<span class="jFiler-item-title"><b title="{{fi-name}}">{{fi-name | limitTo: 25}}</b></span>\
</div>\
{{fi-image}}\
</div>\
<div class="jFiler-item-assets jFiler-row">\
<ul class="list-inline pull-left">\
<span class="jFiler-item-others">{{fi-icon}} {{fi-size2}}</span>\
</ul>\
<ul class="list-inline pull-right">\
<li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\
</ul>\
</div>\
</div>\
</div>\
</li>',
progressBar: '<div class="bar"></div>',
itemAppendToEnd: true,
removeConfirmation: true,
_selectors: {
list: '.jFiler-item-list',
item: '.jFiler-item',
progressBar: '.bar',
remove: '.jFiler-item-trash-action',
}
},
addMore: true,
captions: {
removeConfirmation: "Deseja remover o arquivo?",
errors: {
filesLimit: "O limite de arquivos para ser enviado é de {{fi-limit}} arquivos por envio.",
filesType: "Only Images are allowed to be uploaded.",
filesSize: "{{fi-name}} is too large! Please upload file up to {{fi-maxSize}} MB.",
filesSizeAll: "Files you've choosed are too large! Please upload files up to {{fi-maxSize}} MB."
}
}
});
Esse é o código do plugin Jquery.Filer, o código peguei da documentação do próprio.
Agora, o codigo que eu uso pra enviar o formulario por ajax.
// Cria uma variável que vamos utilizar para verificar se o
// formulário está sendo enviado
var enviando_formulario = false;
// Captura o evento de submit do formulário
$('#formUpload').submit(function(){
// O objeto do formulário
var obj = this;
// O objeto jQuery do formulário
var form = $(obj);
// O botão de submit
var submit_btn = $('.enviar');
// O valor do botão de submit
var submit_btn_text = submit_btn.html();
// Dados do formulário
var dados = new FormData(obj);
if(form.valid()){
// Retorna o botão de submit ao seu estado natural
function volta_submit() {
// Remove o atributo desabilitado
submit_btn.removeAttr('disabled');
// Retorna o texto padrão do botão
submit_btn.html(submit_btn_text);
// Retorna o valor original (não estamos mais enviando)
enviando_formulario = false;
}
// Não envia o formulário se já tiver algum envio
if ( ! enviando_formulario ) {
// Envia os dados com Ajax
$.ajax({
// Antes do envio
beforeSend: function() {
// Configura a variável enviando
enviando_formulario = true;
// Adiciona o atributo desabilitado no botão
submit_btn.attr('disabled', true);
// Modifica o texto do botão
submit_btn.text('Enviando...');
// Remove o erro (se existir)
$('.error').remove();
},
// Captura a URL de envio do form
url: form.attr('action'),
// Captura o método de envio do form
type: form.attr('method'),
// Os dados do form
data: dados,
// Não processa os dados
processData: false,
// Não faz cache
cache: false,
// Não checa o tipo de conteúdo
contentType: false,
// Se enviado com sucesso
success: function( data ) {
volta_submit();
// Se os dados forem enviados com sucesso
if ( data == 'OK' ) {
swal("Concluído!", "Arquivos enviados com sucesso!", "success");
} else {
alert(data);
// Volta o botão de submit
volta_submit();
swal({
title: "Erro!",
text: "Falha ao enviar arquivos!",
type: "error",
confirmButtonColor: "#78caed",
confirmButtonText: "OK",
closeOnConfirm: true
});
}
},
// Se der algum problema
error: function (request, status, error){
// Volta o botão de submit
volta_submit();
swal({
title: "Erro!",
text: "Falha ao enviar arquivos!",
type: "error",
confirmButtonColor: "#78caed",
confirmButtonText: "OK",
closeOnConfirm: true
});
}
});
}
}
// Anula o envio convencional
return false;
});
Se alguem puder me ajudar, eu agradeço..
Abraços.