Upload de imagem com Jquery sem refresh
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.
Discussão (1)
Carregando comentários...