-
Conteúdo Similar
-
Por mateusottobr
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!
-
Por Wilterson Garcia
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.
-