Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Wilterson Garcia

Barra de Progresso no Upload

Recommended Posts

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por Thiago Duarte
      Oi, gostaria de arrastar imagem e ao soltar formar bloco html, meu bloco de html ficaria com nome, content-1.html, content-2.html, etc
       
      Alguem pode me ajudar?
    • Por ILR master
      Salve galera.
       
      Vou publicar um evento e quero colocar um Cronômetro regressivo que mostre em tempo real os dias, horas e minutos que faltam para determinada data, tipo:.
      Faltam 5 dias, 12:30:00 para inauguração.
       
      Qdo chegar no dia, quero que apenas apareça uma mensagem.
       
      Alguém pode me ajudar?
    • Por ment0r
      Boa noite pessoal, tudo bem?
       
      Estou desenvolvendo um sistema simples com exibição de formulário via modal. Uma vez cadastrado o serviço (tabela possui apenas dois campos, id e nome), eles são exibidos numa tabela com um ícone que permite a alteração do nome.

       
      Eu clico no ícone e é chamado um modal que é gerado via ajax (pois são vários registros).
       

       
      Nesse modal é mostrado o serviço e uma vez alterado, o botão Salvar chama uma função que atualiza a tabela servico, concluindo a tarefa. Fiz o mesmo processo pra cadastrar o serviço, com a diferença de que o modal está presente na mesma página, ou seja, não é chamado via ajax.
       
      Eis os códigos:
      <a href="#" onclick="modalUpdate(<?= trim($array['id']) ?>)"> <i class='bx bx-edit'></i> </a> // Trecho onde eu chamo a função modalUpdate. Função btAltServico click:
      $('#btAltServico').click(function() { var inpnome = $('#nome'); var inpid = $('#id'); if (inpnome.val() == '') { swal("Atenção", "Por favor, preencha os campos obrigatórios", "warning"); if (inpnome.val() == '') { inpnome.css("border","2px solid #f94545"); } else { inpnome.css("border",""); } alert(inpnome); alert(inpid); } else { $.ajax({ url: '../inc/ajax/altServico.php', type: 'post', dataType: 'json', // pode ser html data: { nome : inpnome.val(), id : inpid.val() }, success: function(resposta){ if (resposta == 1) { inpnome.val(""); inpnome.css("border",""); swal("Sucesso", "Serviço alterado", "success"); } else { if (resposta == 0) { swal("Erro", "Serviço não alterado. Log de erro gerado.", "error"); } else { swal("Atenção", "Serviço já cadastrado", "warning"); } } } }) } });  
      E modalUpdate.php :
       
      <?php /* * altServico.php * * Script responsável pelo update de serviços na tabela servico * * Função chamada pelo arquivo ajax.js */ //if ($_POST) { require'../conn.php'; require'../../class/class.geral.php'; $geral = new Geral(); $nome = $_POST['nome']; $id = $_POST['nome']; $ativo = 1; // Verifica se o servico já foi cadastrado $sqlVer = "select nome from algo68_db_cliente.servico where nome = '".$nome."' and id <> ".$id.""; $queryVer = mysqli_query($conn, $sqlVer); $resultVer = mysqli_num_rows($queryVer); if ($resultVer > 0) { echo json_encode(2); // servico já cadastrado } else { // Update do servico $sql = "update algo68_db_cliente.servico set nome = '".$nome."', ativo = ".$ativo." where id = ".$id; $query = mysqli_query($conn, $sql); $result = mysqli_affected_rows($conn); if ($result > 0) { echo json_encode(1); // alterou o servico } else { $geral->logErro(date('d/m/Y|H:i:s'), @$_SERVER[REQUEST_URI], 'AlterarServico', mysqli_error($conn)); echo json_encode(0); // não alterou o servico } } //} ?> O problema é que quando clico no botão Salvar, não acontece nada - se eu colocar um alert qualquer na função click, só pra saber se está chegando, também não da nada. E está da mesma forma que o cadastro de serviço, que funciona perfeitamente.

      Bom, é isso pessoal, tentei ser o mais breve e especifico possível. Qualquer ajuda é bem vinda, obrigado a todos, desde já.
    • Por gersonab
      bom dia
      tenho uma aplicação onde gero um arquivo em pdf, gostaria de recuperar a url do pdf q foi criado, pois quando este é criado ele abre automaticamente e ou ja faz o download do mesmo, preciso da url para enviar para outros.
      <button type="button" class="btn btn-outline-primary" onclick="createPDF();">Imprimir</button> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/canvas2image@1.0.5/canvas2image.min.js"></script> <script language="javascript"> (function($){ $.fn.createPdf = function(parametros) { var config = { 'fileName':'html-to-pdf' }; if (parametros){ $.extend(config, parametros); } var orig = $(this); var widthOrig = $(orig).width(); $(orig).width(900); var quotes = document.getElementById($(orig).attr('id')); html2canvas(quotes, { onrendered: function(canvas) { var pdf = new jsPDF('p', 'pt', 'letter'); for (var i = 0; i <= quotes.clientHeight/900; i++) { var srcImg = canvas; var sX = 0; var sY = 900*i; var sWidth = 900; var sHeight = 900; var dX = 0; var dY = 0; var dWidth = 900; var dHeight = 900; window.onePageCanvas = document.createElement("canvas"); onePageCanvas.setAttribute('width', 900); onePageCanvas.setAttribute('height', 900); var ctx = onePageCanvas.getContext('2d'); ctx.drawImage(srcImg,sX,sY,sWidth,sHeight,dX,dY,dWidth,dHeight); var canvasDataURL = onePageCanvas.toDataURL("image/png", 1.0); var width = onePageCanvas.width; var height = onePageCanvas.clientHeight; if (i > 0) { pdf.addPage(612, 791); } pdf.setPage(i+1); pdf.addImage(canvasDataURL, 'PNG', 20, 40, (width*.62), (height*.62)); // Retirar o comentário caso queira ver como está sendo gerado o canvas. //document.body.appendChild(onePageCanvas); } pdf.save(config.fileName); $(orig).width(widthOrig); } }); }; })(jQuery); function createPDF() { $('#renderPDF').createPdf({ 'fileName' : '<?php echo $usercli['idocl']; ?>' }); }  
    • Por gersonab
      Boa tarde a todos.
      tenho pesquisado e ainda não encontrei uma forma de montar uma imagem online, tipo, tenho uma área de 400px por 400px , nesta gostaria de acrescentar algumas imagens que já tenho, tipo clicar e arrastar para dentro, sendo que estas imagens já se encontram online no site, seria mais ou menos assim : poderia colocar dentro desta área uma imagem do gato , do cachorro e ou outra. Não sei qual biblioteca ou forma de fazer.
      gostaria da ajuda para iniciar, desde já agradeço.
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.