Ir para conteúdo

POWERED BY:

Arquivado

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

RafiWskY

Barra de progresso sem ajax ?

Recommended Posts

Boa Noite,

 

Vi vários exemplos de barra de progresso para um upload de arquivos, que utiliza ajax. No meu caso recebo os arquivos na mesma página via POST, há possibilidade de fazer uma barra de progresso sem que tenha que passar via ajax ?

 

Se sim, alguém poderia me dar o caminho das pedras ? rsrs

 

 

Código PHP

if(isset($_POST['upload'])){
	$fileMp3 = $_FILES['filemp3'];
	$fileOgg = $_FILES['fileogg'];
	if(!$fileMp3['name'] == "" & !$fileOgg['name'] == ""){														
		if ($fileMp3['type'] == 'audio/mp3' & $fileOgg['type'] == 'audio/ogg'){
			$dir = '../uploads/musicas/';
			$fileMp3['name'] = substr($fileMp3['name'], 0,-3);
			$fileOgg['name'] = substr($fileOgg['name'], 0,-3);
			$novoNomeMp3 = setUri($fileMp3['name']).'.mp3';
			$novoNomeOgg = setUri($fileOgg['name']).'.ogg';
			$caminhoMp3 = $dir.$novoNomeMp3;
			$caminhoOgg = $dir.$novoNomeOgg;
			move_uploaded_file($fileMp3['tmp_name'], $caminhoMp3);
			move_uploaded_file($fileOgg['tmp_name'], $caminhoOgg);
			mysql_query("INSERT INTO musicas (mp3, ogg) VALUES ('$novoNomeMp3', '$novoNomeOgg')");
			echo '<h4 class="alert_success">Arquivos enviados com sucesso.</h4>';
		}else{
			echo '<h4 class="alert_error">Os arquivos selecionados estão em formato inválido.</h4>';
		}
	}else{
		echo '<h4 class="alert_error">É necessário enviar os dois arquivos, MP3 e OGG.</h4>';
	}
}

 

Formulário bem resumido:

 

<form name="musicas-mp3" id="uploadMus" action="" enctype="multipart/form-data" method="post">

<input type="submit" name="upload" value="Enviar Arquivos" class="alt_btn">

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Por receber na mesma página é que não quer o ajax?

 

Por que assim que clicar no botão de enviar você não desabilita ele e coloca um texto "Aguarde..." nele?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Ted, eu tinha intenção de fazer uma barra de progresso, acabei conseguindo via ajax mesmo, resolveu meu problema. Agradeço pela ajuda.

 

Abraço.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Só pra esclarecer (e até que me provem o contrário) seria impossível sem AJAX pois JavaScript não faz upload.

 

O AJAX estaria apenas intermediando o cliente com o servidor para proporcionar em tempo quase real quanto que faltaria para o término do mesmo.

 

Mas na sua essência, a técnica depende da linguagem de servidor, no caso PHP, permitir esse tipo de rastreamento ou pelo menos fornecer a informações para que o JavaScript executasse os cálculos matemáticos e manipulasse o HTML/CSS.

Compartilhar este post


Link para o post
Compartilhar em outros sites

rsrs... eu queria porque eu tava com um problema que não deixava eu executar o arquivo .php que o .js requisitava, mais acabou dando certo.

 

vou tentar aproveitar o mesmo tópico pra outra ajuda, vê se você pode me ajudar.

 

 

Como eu limito nesse código para ser aceito apenas arquivos .mp3 e .ogg ?

 

$(document).ready(function(){
	var mensagem = $("#mensagem");
	var barra = $("#barra");
		
	$("#btn_enviar").on('click', function(event){
        var $fileUpload = $("input[type='file']");
        if (parseInt($fileUpload.get(0).files.length)>2){
        	$("#mensagem").html('<h4 class="alert_error">Envie somente dois arquivos por vez.</h4>');
        }else{
				event.preventDefault();
				$("#form_upload").ajaxForm({
					url: 'upload-musicas.php',
					uploadProgress: function(event, position, total, percentComplete){
						mensagem.html('');
						barra.css('color', '#fff');
						barra.width(percentComplete*7);
						barra.html(percentComplete+'%');
					},
					success: function(data){
						$("#mensagem").html(data);
					},
					error: function(){
						mensagem.html('Erro ao pegar arquivo');	
					}
				}).submit()	
		}
    });
})

Compartilhar este post


Link para o post
Compartilhar em outros sites

De novo, isso é uma coisa que a linguagem servidor deve limitar pois caso JavaScript estiver desabilitado a Aplicação não pode parar, isto é, deve continuar permitindo upload pelos meios "tradicionais".

 

Eu sei que existem plugins que manipulam o File Browser e, de fato, permitem que apenas arquivos de uma determinada extensão sejam selecionados, mas fazer na unha deve ser bastante trabalhoso, principalmente por questões de interoperabilidade.

 

Mas, se fosse para arriscar um palpite, sem buscar nem nada, eu diria que se você consegue extrair alguma informação útil de $fileUpload.get(0).files, então outras mais devem existir prontas para serem analisadas, logo, bastaria verificar a extensão manipulando o objeto String que deve haver nessa entrada.

 

De novo... Especulação de minha parte.

Compartilhar este post


Link para o post
Compartilhar em outros sites

O file não deixa de ser um campo e você pode pegar a informação diretamente dele através do JS, concordo com o Bruno e ainda digo mais, melhor forma e mais segura é fazer esse bloqueio ou na tag HTML, ou melhor ainda no PHP

 

http://stackoverflow.com/questions/254184/filter-extensions-in-html-form-upload

 

http://stackoverflow.com/questions/181214/file-input-accept-attribute-is-it-useful

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bruno e Ted, entendi...

 

Eu estou fazendo a validação do formato no upload.musicas.php, porém a validação só acontece depois que o arquivo é totalmente enviado, eu queria validar antes de fazer o upload, pra não acontecer de a pessoa ficar um tempão esperando enviar os arquivos pra depois falar que não pode.

 

A solução de bloquear na tag html ajuda, mais não resolve, porque o usuário pode mudar em baixo para todos os formatos novamente.

 

Alguma sugestão ?

 

Só para sintetizar como estou validando

 

$files = $_FILES['arquivo'];
$qtdArq = count($files['name']);
   if($qtdArq <= 2){	
	if(!$files == ""){							
	    if ($files['type'][0] == 'audio/mp3' && $files['type'][1] == 'audio/ogg'){

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Não tenho certeza, faz muito tempo que não mexo com uploads, mas o upload propriamente dito, isto é, mover do arquivo temporário para o diretório designado, só será efetuado depois de satisfeitas todas as condições definidas pelo programador.

 

Não faz sentido algum o programa fazer o upload, verificar se é válido pela extensão e então deletar. Concorda comigo? Pra quê mexer duas vezes com o sistema de arquivos, que é super lento, se pode mexer uma vez só se tudo estiver nos conformes.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Teoricamente "acho" que eu entendo, mais na prática, como posso resolver isso ? Tenho muito pouco conhecimento de javascript, não conheço as funções, e muito pouco da sintaxe.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Primeiro de tudo, esquece JavaScript. A Aplicação deve funcionar independente dele.

 

Codifique o script em PHP e, depois de pronto você adiciona o JavaScript para enriquecer a experiência do usuário.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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