Fotos “Ilimitadas” em Formulários com Ajax, Jquery e PHP

29 ago

Publicado por

Há algum tempo atrás estive procurando algum script Jquery para resolver o problema do envio de quantas fotos fossem necessárias em um formulário, mas não queria usar nenhuma solução em flash ou Iframe que simularia um Ajax, queria enviar as fotos juntamente com todos os outros dados do formulário.

Na época até cheguei a encontrar e fazer uso do Hiddenfile do Renato Ferraz, mas depois resolvi criar uma variação utilizando o velho Ajax e Jquery, e com esta técnica você poderá criar formulários dinâmicos mesmo depois que estes já estejam na tela do navegador.

1º Passo – Para começar, como sempre, incorpore o Jquery à sua página do formulário, se não sabe como leia aqui.

2º Passo – Dentro do escopo do formulário criar a seguinte div, como exemplo esta página (index.php):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Fotos Ilimitadas com Ajax e Jquery</title>
		<script src="jquery.js" type="text/javascript"></script>
	</head>
	<body>		

		<form name="fotos" action="grava_fotos.php" method="post" enctype="multipart/form-data">

			<div id="varias_fotos" class="varias_fotos">

				<?php $num_fotos = 0; ?>

				<a class="input_link" href="#" id="insere_foto">Clique para inserir a <?php echo ($num_clausulas+1); ?>ª foto</a>

				<script>
				$(document).ready(function(){
					$('#insere_foto').click(function(evento){
						evento.preventDefault();
						$('#varias_fotos').load('addfoto.php',{num_fotos: '<?php echo $num_fotos; ?>'});
					});
				});
				</script>

			</div>

			<input type="submit" value="Enviar"/>

		</form>

	</body>
</html>

3º Passo – Criar o arquivo responsável por fazer a criação dos campos files que será puxado por Ajax (addfoto.php):

<input type="file" name="nova_foto_<?php echo ($_POST['num_fotos']+1) ?>" value="" />

<?php $num_fotos = ($_POST['num_fotos']+1); ?>

<div id="fotos<?php echo ($num_fotos+1) ?>">

	<a class="input_link" href="#" id="insere_foto">Clique para inserir <?php echo ($num_fotos+1); ?>ª foto</a>

	<script>
	$(document).ready(function(){
		$('#insere_foto').click(function(evento){
			evento.preventDefault();
			$('#fotos<?php echo ($num_fotos+1) ?>').load('addfoto.php',{num_fotos: '<?php echo $num_fotos; ?>'});
		});
	})
	</script>

	<input type="hidden" name="num_fotos" value="<?php echo $num_fotos; ?>"/>

</div>

4º Passo – Criar o arquivo (grava_fotos.php) para recuperar as fotos basta um for com o número de fotos passados pelo campo hidden:

<?php

//cadastra todas as fotos

//numero de fotos
$novas_fotos = $_POST['num_fotos'];
for ($i=1; $i<=$novas_fotos; $i++) {

	//se tiver arquivos para ser carregado...
    if($_FILES["nova_foto_".$i]["name"] != '') {
        //define arquivo
        $foto = $_FILES["nova_foto_".$i];
        //Pega extensão da imagem
        preg_match("/\.(gif|bmp|png|jpg|jpeg){1}$/i", $foto["name"], $ext);
        //Gera um nome único para a imagem
        $nome_imagem = md5(uniqid(time())) . "." . $ext[1];
        //Caminho de onde ficará a imagem
        $caminho_imagem = "imagens/" . $nome_imagem;
        //Faz o upload da imagem para seu respectivo caminho
        move_uploaded_file($foto["tmp_name"], $caminho_imagem);
    }

}

echo "Feito!";

?>

Abraços!

Sobre Guilherme Mattje

Desenvolvedor Web

Publicado em 29/08/2011, em JavaScript, Linguagens, PHP e marcado como , , , , , . Adicione o link aos favoritos. Deixe um comentário.

Deixe um comentário