Upload de imagem com Jquery sem refresh

[Gemenson Miranda 0]

Olá pessoal minha dúvida agora é sobre como visualizar um upload de imagem antes mesmo de enviar o arquivo para o banco de dados, qual o script que possibilita isso, já visualizei diversos artigos mais sem sucesso...

<form class="table-signup" id="formulario" enctype="multipart/form-data" action="upload.php" method="post" name="">
<div id="visualizar"></div>
<input type="file" id="imagem" name="imagem">
</form>

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

    header("Location: start.php");
   
?>

<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>

Usei esses códigos acima, se tiver algo errado ou outro código pra fazer funcionar de verdade agradeço.

[Jozimar Back 4]

Olá

 

Para subir arquivos via jQuery sem refresh na página utilizo um código semelhante à este:

$(form).on('submit', function () {
	var data;
	var contentType = "application/x-www-form-urlencoded";
	var processData = true;
	if ($(this).attr('enctype') == 'multipart/form-data') {
		data = new FormData($('.form-horizontal').get(0));//seleciona classe form-horizontal adicionada na tag form do html
		contentType = false;
		processData = false;
	} else {
		data = $(this).serialize();
	}
	$.ajax({
		data: data,
		type: $(this).attr('method'),
		url: $(this).attr('action'),
		contentType: contentType,
		processData: processData,
		success: function (response) {
			//seu código após sucesso
		},
		error: function (exr, sender) {
				alert('Erro ao carregar pagina');
		}
	});
}