sistema de inserir foto igual do perfil do facebook

metrequiel · Março 25, 2015

bom dia amigo, estava uns dias afastando, fazendo alguns trabalhos agora estou de volta, tenho muita coisa boa para ensinar em breve quanto tiver com mais tempo vou contribuir mais com o fórum

preciso de uma ajuda com a linguagem php, sei muito pouco mais tenho aprendido muito aqui no fórum agradeço a todos.

Agora estou com essa duvida de como fazer um sistema desse tipo pode ser em php

no meu formulário tem uma área para inserir uma foto, eu quero clicar nessa área escolher uma foto do meu computador e a mesma aparecer nessa mesma área

igual como tem no facebook: que agente clica no lugar da foto e a mesma carregar nesse mesmo local

pode ser igual como agente coloca a foto do perfil aqui do fórum

tem algum script

como fazer alguma dica, poder ser um vídeo ensinando, preciso concluir um trabalho

valeu amigos

Gavaldão · Março 25, 2015

Dê uma olhada nesse link do 9scholl

acho que pode ajudar.

www.9lessons.info/2015/02/facebook-style-background-image-upload.html

Mateus Silva · Março 25, 2015

seguinte, isso é na verdade jquery. vou te passar uma função que eu utilizo nos sistemas de upload que faço (uso isso pra dar um preview da imagem), segue o código:

$("#ID-DO-INPUT-FILE").on('change', function(){
	    if (this.files && this.files[0]){
	        var reader = new FileReader();
	        reader.onload = function(e){
	            $('#ID-DA-TAG-IMG-QUE-VAI-APARECER-A-IMAGEM').attr("src", e.target.result).fadeIn();
	        }
	        reader.readAsDataURL(this.files[0]);
	    }
	});

ai você colocaria um formulário com o botão submit e o resto do upload é normal, OU, você poderia fazer também uma função jQuery ali dentro pra fazer o upload dinamicamente, aí vai das necessidades do seu sistema :D

metrequiel · Março 28, 2015

valeu pessoal pelas dicas vou testar , se alguém tiver outras dicas agradeço pode ser algo mais simples e facil

o formulário é esse de teste:

http://meusitebom.esy.es/

ate mais.

poxa não estou conseguindo baixar esse script pelo site já tem mais de 18 horas que mandei meu e-mail para eles

e ainda não foi liberado

você ou outra pessoa aqui do fórum poderia disponibilizar ele para download ou enviar para o meu e-mail.

o script é esse: FACEBOOK STYLE BACKGROUND IMAGE UPLOAD AND POSITION ADJUSTMENT[/size]

agradeço.

valeu amigo deu certo

agora o que eu queria mesmo era quando eu selecionasse a foto no computador aparecesse a opção de recortar a imagem para ficar do tamanho do quadrado.

eu queria desse jeito

mais deu certo com as outras dicas blz

arldin · Março 28, 2015

poxa não estou conseguindo baixar esse script pelo site já tem mais de 18 horas que mandei meu e-mail para eles

e ainda não foi liberado

você ou outra pessoa aqui do fórum poderia disponibilizar ele para download ou enviar para o meu e-mail.

o script é esse: FACEBOOK STYLE BACKGROUND IMAGE UPLOAD AND POSITION ADJUSTMENT

agradeço.

Este script e pago

Eu uso no meu assim tem uma tabela a onde consta o caminho da foto do usuario quando ele faz o cadastro

Deixo ele em hidden na pasta uploadedimage ja tem uma imagem pre definida

e depois que ele faz o cadastro do uma opção para ele mudar a foto

<?php
include("config.php");

$id= $_SESSION['SESS_ID'];
$image=mysql_query("SELECT * FROM se_users WHERE user_id='$id'");
			$row=mysql_fetch_assoc($image);
			$_SESSION['imageko']= $row['profImage'];
			echo '<div id="pic">';
			echo "<img width=75 height=75 alt='Unable to View' src='" . $_SESSION['imageko'] . "'>";
			echo '</div>';			
mysql_close($con);
?>
<?php echo $_SESSION['SESS_FIRST_NAME'];?>     
      <p align="center"><a href="editpic.php" style="text-decoration:none;">Mudar foto do perfil </a></p>

e este e o que faz a mudança da foto

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Mudar foto do perfil</title>
</head>

<body>
<form action="editpic.php" method="post" enctype="multipart/form-data">
  <p>Nome:
    <label>
    
    </label>
  </p>
  <p> Arquivo:
    <input type="file" name="image"> 
  </p>
  <p>
    <input type="submit" value="enviar">
        </p>
</form>

<?php
include("config.php");

$user_id= $_SESSION['SESS_ID'];
$user= $_SESSION['SESS_FIRST_NAME'];



	if (!isset($_FILES['image']['tmp_name'])) {
	echo "";
	}else{
	$file=$_FILES['image']['tmp_name'];
	$image= addslashes(file_get_contents($_FILES['image']['tmp_name']));
	$image_name= addslashes($_FILES['image']['name']);
	$image_size= getimagesize($_FILES['image']['tmp_name']);

	
		if ($image_size==FALSE) {
		
			echo "Isso não é uma imagem!";
			
		}else{
			
			move_uploaded_file($_FILES["image"]["tmp_name"],"uploadedimage/" . $_FILES["image"]["name"]);
			
			$location="uploadedimage/" . $_FILES["image"]["name"];

			mysql_close($con);*/
			if(!$update=mysql_query("UPDATE se_users SET profImage = '$location' WHERE user_id='$user_id'")) {
			
				echo mysql_error();
				
				
			}
			
			else{
			
			echo '<script> location.href="sua pagina"; </script>';
			exit();
			}
   }



?>
</body>
</html>

Ve se serve para voce

metrequiel · Março 28, 2015

vou testar essa tua dica, parece ser boa

mais tu sabe

Qual é o script usado no site do Linkdin para adicionar a foto do perfil?

Williams Duarte · Março 28, 2015

poxa não estou conseguindo baixar esse script pelo site já tem mais de 18 horas que mandei meu e-mail para eles

e ainda não foi liberado

você ou outra pessoa aqui do fórum poderia disponibilizar ele para download ou enviar para o meu e-mail.

Qual é a dificuldade de copiar os códigos lá do site e salvar na sua máquina?

Na boa, essa galera de hoje em dia quer tudo na mão, empacotado e pronto para download! :sick:

Este:

http://www.9lessons.info/2015/02/facebook-style-background-image-upload.html

Não está tudo separadinho?

metrequiel · Março 28, 2015

fiz isso mesmo copiei o codigo rsrsr

foi muito util posso implementar ele em alguns trabalhos gostei muito

agora eu queria

um script igual esse do linkedin: http://nsae02.casimages.net/img/2015/03/28/150328022349288331.jpg

de adicionar foto do perfil você sabe o nome ou como posso fazer

de qual quer forma foi útil as dicas

blz valeu

metrequiel · Março 30, 2015

Então pessoal passando tantos dias pesquisando encontrei esse plug ( jquery picture cut ) nesse site

http://www.jqueryrain.com/?jKrB7Iva

exatamente o que eu preciso, mais não estou conseguindo instalar, gostaria da ajuda de vocês com um tutorial melhor explicado quais são os arquivos que preciso editar

utilizo o usbwebserver na maquina local

ate mais

Benjamim River · Setembro 8, 2016

seguinte, isso é na verdade jquery. vou te passar uma função que eu utilizo nos sistemas de upload que faço (uso isso pra dar um preview da imagem), segue o código:
$("#ID-DO-INPUT-FILE").on('change', function(){
	    if (this.files && this.files[0]){
	        var reader = new FileReader();
	        reader.onload = function(e){
	            $('#ID-DA-TAG-IMG-QUE-VAI-APARECER-A-IMAGEM').attr("src", e.target.result).fadeIn();
	        }
	        reader.readAsDataURL(this.files[0]);
	    }
	});
ai você colocaria um formulário com o botão submit e o resto do upload é normal, OU, você poderia fazer também uma função jQuery ali dentro pra fazer o upload dinamicamente, aí vai das necessidades do seu sistema :D

Boa tarde a todos..

Queria aproveitar este posto para conseguir resolver um problema..

Utilizando o exemplo do Mateus, estou tentando criar um preview da imagem antes de salvar no banco, porem não estou conseguindo fazer funcionar, alguém poderia me ajudar?

Meu código ficou assim:

<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>

<script type="text/javascript">
  $("#imagem").on("change", function() {
    if (this.files && this.files[0]) {
      var reader = new FileReader();
        reader.onload = function(e) {
          $("#foto").attr("src", e.target.result).fadeIn();
            }
              reader.readAsDataURL(this.files[0]);
         }
    });
</script>

	<form action="" method="post">
		<input type="file" id="imagem" name="imagem" />
		<img id="foto"></img>
	</form>

Obrigado.

Arquivado

sistema de inserir foto igual do perfil do facebook

Recommended Posts

metrequiel 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gavaldão 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

Mateus Silva 64

Compartilhar este post

Link para o post

Compartilhar em outros sites

metrequiel 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

arldin 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

metrequiel 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Williams Duarte 431

Compartilhar este post

Link para o post

Compartilhar em outros sites

metrequiel 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

metrequiel 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Benjamim River 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Conexão mysql com outro domínio

[Resolvido] JavaScript - Exibir logo dentro da Tabela html

Javascript - Calcular Valores Monetário em Tempo Real

Fóruns

Tempo Real

Informação importante