Fala galera tudo certo ? minha duvida é a seguinte:
Tenho uma div de class="progress-wrap progress", e dentro dela no próprio HTML existe 2 parâmetros chamados data-progresspercent="0" e outro data-speed="1000",preciso alterar esses 2 parâmetros com j query, como poderia fazer ?
segue a div.
<div class="progress-wrap progress" data-progresspercent="100" data-height="5px" data-width="100%" data-speed="1000" data-color="0BAE72">
já tentei...
$(function carregar() {
$(".progress-wrap progress").attr("data-progresspercent","50");
});
mas não funciona, exibi também esses mesmos valores na tela com um alert, mais retornou como undefined.
Obrigado!
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..