Jump to content
Sign in to follow this  
Gemenson Miranda

Upload de imagem com Jquery sem refresh

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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');
		}
	});
}

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By teuzero
      Meu site é :https://xraros.000webhostapp.com/
       
      To com seguinte problema eu adicionei esse código:
       
      jQuery(document).ready(function() { if($(window).width()<=820) { $('#menu').hide(); } }); no arquivo carrega.js com a intenção de ocultar o menu só quando a tela estive com 820px de largurar ou menos, mais isso não esta acontecendo, como podem ver no meu site esse script n esta funcionando ele ta ocultando o menu em todas as resoluções, como faço pra deixar o menu oculto na resolução de 820px pra baixo?
    • By Gourmet
      Eu tenho 3 layout diferentes e gostaria de que quando o usuário clicasse no layout desejado aparecesse o modelo do layout
    • By leandro.silva
      Estou tentando fundir essas funções para receber o total levando em consideração os filtro. Segue.
      FILTRO.
       
       
      $(function(){ $("#tabledit input").keyup(function(){ var index = $(this).parent().index(); var nth = "#tabledit td:nth-child("+(index+1).toString()+")"; var valor = $(this).val().toUpperCase(); $("#tabledit tbody tr").show(); $(nth).each(function(){ if($(this).text().toUpperCase().indexOf(valor) < 0){ $(this).parent().hide(); } }); }); $("#tabledit input").blur(function(){ $(this).val(""); }); TOTAL.
       
       
      $(function(){ var valorCalculado = 0; $( ".valor-calculado" ).each(function() { valorCalculado += parseInt($( this ).text()); }); $( "#qtdtotal" ).text(valorCalculado); });  
    • By fabioamorais
      Ola pessoal, sou novo aqui no fórum e também no mundo da programação. 

      Estou criando um sistema de cadastro de clientes em PHP 7 e mysql
      para meu serviço para fins de organização, tenho ja pronto o sistema de cadastro e edição do cliente, tenho login por usuário e senha.
      preciso colocar nesse sistema uma forma que registre a ação e o usuário que fez a ação quando houver uma alteração no cadastro.
      exemplo;
      O usuario (jose) alterou o status de analise para concluído .
      o usuario (pedro) alterou a localização de mesa para armario.
      e que fosse exibido como um tipo de histórico de eventos no próprio cadastro do cliente.
      e nesse campo se ainda tiver como add cometários.
      Usuario (jose): Precisa entrar em contato com o cliente francisco. 
      Usuario (pedro): cliente foi avisado e está sabendo.
       
      quem souber uma forma de fazer isso, ficaria muito grato.

    • By Webster Moitinho
      Implementei em meu site o JQuery Autocomplete e consegui fazer ele funcionar na boa. Porém não estou conseguindo fazer com que, quando o usuário pesquisar pelo termo, e selecionar na lista, ele seja direcionado para a respectiva página.
       
      Meu código está assim:
      <div id="pesquisa"> <form action="index.php?id=<?php echo $target; ?>&tp=smp" method="post" name="autocomplete" target="_self"> <strong>Pesquisa:</strong> <input id="autocomplete" title="Digite algo" placeholder="&nbsp;&nbsp;&nbsp;&nbsp;Digite algo"> <button id="button-icon">Pesquise</button> </form> </div><!--pesquisa--> <script src="libraries/jquery.js"></script> <script src="libraries/jquery-ui.js"></script> <script> <?php $sql = "SELECT pags.id, pags.title, pags.keywords, pags.tema FROM pags WHERE vendavel = 'S' ORDER BY pags.id"; $resultado = $PDO->query( $sql ); $rows = $resultado->fetchAll(PDO::FETCH_ASSOC); ?> var availableTags = [ <?php foreach ($rows as $key => $linha) { $target = $linha['id']; echo '"' . $linha['title'] .' | ' . $linha['keywords'] . '",'; } ?> "" ]; $( "#autocomplete" ).autocomplete({ source: availableTags }); $( "#button" ).button(); $( "#button-icon" ).button({ icon: "ui-icon-gear", showLabel: false }); </script>  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.