Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

metrequiel

sistema de inserir foto igual do perfil do facebook

Por , em PHP

Recommended Posts

metrequiel    0

metrequiel
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Mateus Silva    64

Mateus Silva
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

metrequiel    0

metrequiel
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

arldin    1

arldin
Postado

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

 

<input name="propic" id="dadded" type="hidden" value="uploadedimage/defoult.jpg" />

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Williams Duarte    431

Williams Duarte
Postado

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?

Compartilhar este post

Link para o post
Compartilhar em outros sites

metrequiel    0

metrequiel
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

metrequiel    0

metrequiel
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Benjamim River    0

Benjamim River
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos PHP
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito