Barra de Progresso no Upload

[Wilterson Garcia 0]

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.

[angelorubin 142]

Olha um com barra de upload já - http://fineuploader.com/index.html