Artigos PHP Upload de imagens sem dar refresh utilizando PHP e Jquery

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;
    }
   
?>