1

Estou procurando um modo de fazer upload de imagem dentro de um form de cadastro.

Mas toda solução que encontro não me serve, pois preciso que o upload seja realizado assim que o usuário selecione a imagem, sem que ele seja levado a outra página atravéz de um input type="submit". Pode até existir um botão Enviar, ou Upload ao lado do input type="file", mas que permaneça na página!

O nome da imagem pode até ser sorteado com um rand().

1

2 Respostas 2

3

Upload de imagens sem dar refresh utilizando PHP e Jquery

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", caso você não use banco de dados basta remover a linha include('db.php') utilizando os //

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

?>

Ta tudo ai, carregar a imagem na mesma pagina sem dar Refresh.

1
  • Tem como aumentar o tamanho permitido de arquivos? 13/09/2018 às 0:31
1

Uma idéia é usar um formulário somente para a imagem, o target do formulário sendo um iframe na própria página.

Depois de receber o post em um arquivo PHP, redireciona com uma resposta HTTP 303 para outra página que mostra a imagem ou a imagem em si. Só o iframe muda o endereço, assim a página principal continua a mesma.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .