Esse artigo tem como objetivo mostrar o upload de uma imagem sem dar refresh na tela e exibir a imagem após o upload. Para tal será utilizada a biblioteca Jquery e o plugin jquery.form para fazer o submit do form e para o código de upload será utilizado o PHP.
Apesar de ser upload de imagens, com uma pequena alteração pode-se enviar qualquer tipo de arquivos.
MySQL
Primeiramente criaremos a tabela no MySQL:
CREATE TABLE `test`.`fotos` (
`idfoto` INT NOT NULL AUTO_INCREMENT ,
`foto` VARCHAR(150) NULL ,
PRIMARY KEY (`idfoto`) );
index.php
Essa página contém o formulário de envio e a div para visualizar a imagem após o upload.
<form id="formulario" method="post" enctype="multipart/form-data" action="upload.php">
Foto
<input type="file" id="imagem" name="imagem" />
</form>
<div id="visualizar"></div>
Javascript
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function(){
/* #imagem é o id do input, ao alterar o conteudo do input execurará a função baixo */
$('#imagem').live('change',function(){
$('#visualizar').html('<img src="ajax-loader.gif" alt="Enviando..."/> Enviando...');
/* Efetua o Upload sem dar refresh na pagina */ $('#formulario').ajaxForm({
target:'#visualizar' // o callback será no elemento com o id #visualizar
}).submit();
});
})
</script>
upload.php
Nesse arquivo contém o código que efetua o upload para uma pasta com nome "fotos"
<?php
include('db.php');
$pasta = "fotos/";
/* formatos de imagem permitidos */
$permitidos = array(".jpg",".jpeg",".gif",".png", ".bmp");
if(isset($_POST)){
$nome_imagem = $_FILES['imagem']['name'];
$tamanho_imagem = $_FILES['imagem']['size'];
/* pega a extensão do arquivo */
$ext = strtolower(strrchr($nome_imagem,"."));
/* verifica se a extensão está entre as extensões permitidas */
if(in_array($ext,$permitidos)){
/* converte o tamanho para KB */
$tamanho = round($tamanho_imagem / 1024);
if($tamanho < 1024){ //se imagem for até 1MB envia
$nome_atual = md5(uniqid(time())).$ext;
//nome que dará a imagem
$tmp = $_FILES['imagem']['tmp_name'];
//caminho temporário da imagem
/* se enviar a foto, insere o nome da foto no banco de dados */
if(move_uploaded_file($tmp,$pasta.$nome_atual)){
mysql_query("INSERT INTO fotos (foto)
VALUES (".$nome_atual.")");
echo "<img src='fotos/".$nome_atual."'
id='previsualizar'>"; //imprime a foto na tela
}else{
echo "Falha ao enviar";
}
}else{
echo "A imagem deve ser de no máximo 1MB";
}
}else{
echo "Somente são aceitos arquivos do tipo Imagem";
}
}else{
echo "Selecione uma imagem";
exit;
}
?>
