Criar uma galeria de fotos simples sem utilizar nenhuma base de dados. A galeria não terá controles, será implementado somente o cadastro e exibição das imagens. Toda operação será feito sem refresh do navegador, ou seja, utilizando requisições Ajax. A cada upload de imagem realizado, é gerado um Thumbnail da imagem.
Tecnologias aplicadas:
Estrutura de arquivos:
Para o desenvolvimento será criado os seguintes arquivos:
- index.html => Página com formulário de cadastro e exibição da nossa galeria de fotos.
- upload.php => Responsável por tratar e realizar o upload da imagem.
- galeria.php => Responsável por carregar as imagens cadastradas na galeria de fotos.
- fotos => Pasta que armazenará as imagens.
- thumbs => Pasta que armazenará as miniaturas das imagens.
Desenvolvimento
Arquivo: index.html
Vamos criar nesse arquivo um botão, com ID btnUpload, para que o usuário selecione as imagens para download e uma DIV, com ID galeria, que exibirá nossa galeria:
<body>
<input type="file" name="btnUpload" id="btnUpload" />
<div id="galeria"></div>
</body>
No <head> do arquivo, vamos adicionar nossos plugins jQuery, Uploadify e PhotoBox e, em seguida, criar as funções que fará a ligação do html com o php.
<head>
<!-- jQuery -->
<script type="text/javascript" src="js/jquery.js"></script>
<!-- Uploadify -->
<link rel="stylesheet" type="text/css" href="js/uploadify/uploadify.css" />
<script type="text/javascript" src="js/uploadify/jquery.uploadify.min.js"></script>
<!-- PHOTOBOX -->
<link rel="stylesheet" href="js/photobox/photobox.css" />
<script type="text/javascript" src="js/photobox/photobox.js"></script>
<!-- Funções Locais -->
<script type="text/javascript">
$(document).ready(function(){
var dom = '#btnUpload'; // Id do botão de upload
$(dom).uploadify({ //Configuração do botão de upload
'swf' : 'js/uploadify/uploadify.swf',
'uploader' : 'upload.php', // Script php que fará o upload do arquivo
'buttonText' : 'Arquivos', // Label do botão
'multi' : true, // Permissao de seleção de multiplos arquivos
'width' : 200, // Largura do botão
'height' : 38, // Altura do botão
'uploadLimit' : 0, // Quantidade de arquivos permitido
'removeCompleted' : true, // remove o progresso do arquivo ao finalizar o upload
'onUploadSuccess': function(arquivo, dados, resposta){ //Função executada ao finalizar o upload do arquivo
if(dados != '1')
alert('Erro com o arquivo '+arquivo.name+': '+dados);
},
'onUploadComplete': function(){ //Função executada ao finalizar o processo de upload
carregaGaleria(); //função que carrega a galeria de fotos.
}
});
carregaGaleria();
});
function carregaGaleria(){ // Função responsável por carregar a galeria de fotos.
$.ajax({ //instancia uma requisição ajax.
url : 'galeria.php', //script que será executado
complete: function(data){ //função executada ao finalizar a requisição ajax.
$('#galeria').html(data.responseText); //preenche a galeria com o retorno da requisição ajax.
$('#galeria').photobox(); //configura o photobox nas imagens
}
});
}
</script>
</head>
No head então configuramos o botão de download ao carregar a página. Cada parâmetro está devidamente comentado explicando o seu funcionamento.
Criamos, ainda, uma função chamada carregaGaleria() que fará a requisição para que seja retornado as fotos cadastradas e inserindo em nossa div da Galeria.
Feito isso o index.html está pronto.
Arquivo: upload.php
Esse arquivo fará o tratamento e o upload em si da(s) imagem(ns) selecionada(s).
<?php
//configurando o root do site [essa linha pode ser excluida caso queira configurar o $targetFolder manualmente
$dir = str_replace('\\', '/', str_replace(str_replace('/', '\\', $_SERVER['DOCUMENT_ROOT']), '', getcwd()));
//***************************************************************************/
include("redimensiona.php"); //biblioteca para gerar o thumbnail da imagem
$thumbnail = new OBImagem();
$targetFolder = $dir.'/fotos'; // pasta de destino do arquivo a partir do DocumentRoot do site
if (!empty($_FILES)) {
$tempFile = $_FILES['Filedata']['tmp_name']; //recebe o arquivo temporario
$targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder; //configura o diretorio de destino
$targetFile = rtrim($targetPath,'/') . '/' . $_FILES['Filedata']['name']; // configura o caminho completo do arquivo de destino
// Validate the file type
$fileTypes = array('jpg','jpeg'); // Extensões permitidas
$fileParts = pathinfo($_FILES['Filedata']['name']);
if (in_array(strtolower($fileParts['extension']),$fileTypes)) { //verifica se a intenção do arquivo é válida
if(move_uploaded_file($tempFile,$targetFile)){ // verifica se o upload foi feito
$arquivo = $_FILES['Filedata']['name']; // pega o nome do arquivo
$size = getimagesize($targetFile); // pega as dimensões da imagem
if ($size[0] > $size[1]){ //se largura maior que a altura
$thumbnail->redimensiona_fixo($targetFile,"thumbs/$arquivo",310,205,100); //gera um thumbnail da foto de tamanho 310x205
}
else{
$thumbnail->redimensiona_fixo($targetFile,"fotos/$arquivo",205,310,100); //gera um thumbnail da foto de tamanho 310x205
}
echo 1;
}
else{
switch($_FILES['Filedata']['error']){
case '1':
echo 'Configuração do Servidor web não permite upload do arquivo neste tamanho.';
break;
case '2':
echo 'Tamanho de arquivo não permitido pelo Sistema';
break;
case '3':
echo 'Arquivo parcialmente transmitido. Tente novamente';
break;
case '6':
echo 'Problema de configuração da pasta temporária';
break;
case '7':
echo 'Não foi possível salvar o arquivo em disco do servidor.';
break;
case '8':
echo 'A biblioteca de upload do servidor está desabilitada.';
break;
default:
echo 'Erro ao tentar realizar o upload.';
break;
}
}
} else {
echo 'Tipo de arquivo inválido.';
}
}
?>
Nesse arquivo, estamos recebendo o arquivo pelo vetor $_FILES e fazendo os tratamentos na imagem, como por exemplo, gerar o thumbnail, verificar se a extensão do arquivo é jpg ou jpeg.
No arquivo incorporado, redimensiona, consta uma classe para que possamos gerar os thumbnails das imagens selecionadas.
Feito isso nosso arquivo de upload está pronto.
Arquivo: galeria.php
Nesse arquivo, vamos percorrer o diretório onde está armazenado as imagens e retornar para que seja incorporada na div Galeria.
<?php
$diretorio = 'fotos/'; //configura o diretório onde está armazenado as imagens
$ponteiro = opendir($diretorio); // abre um ponteiro para percorrer o diretório.
while($arquivo = readdir($ponteiro)){ // percorre o diretório até o ultimo arquivo
if($arquivo != '.' && $arquivo != '..') // elimina as configurações de diretório atual e diretório anterior.
// imprime a imagem
echo "
<a href='fotos/".$arquivo."'>
<img src='thumbs/".$arquivo."' style='float: left; margin-right:10px; margin-bottom:10px;' />
</a>
";
}
closedir($ponteiro); //fecha o ponteiro
?>
Feito isso, o arquivo estará pronto.
Download dos arquivos
Esse foi nosso post!
Em breve estaremos de volta com mais conteúdo.
Obrigado.
Nenhum comentário:
Postar um comentário