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

Upload de imagens sem dar refresh utilizando PHP e Jquery

Aprenda como fazer Upload de arquivos sem dar refresh na tela, utilizando PHP e Jquery

MySQL

index.php

Javascript

upload.php

Artigos relacionados