Alterar imagem ao clicar num link
Olá,
Estou desenvolvendo uma aplicação em PHP onde o usuário pode se cadastrar. No momento do cadastro é gravada uma imagem padrão e quando o usuário estiver em seu perfil ele pode alterar os dados, inclusive a imagem. Preciso fazer com que ao clicar m um link (que aparece quando ele move o mouse sobre a imagem). O que eu queria é quando o usuário clicar sobre esse link, abrir a tela para seleção e quando o usuário escolher a imagem e clicar no botão Abrir a imagem seja trocado no BD.
Alguém poderia me dar uma luz. Desde já agradeço.
Estou desenvolvendo uma aplicação em PHP onde o usuário pode se cadastrar. No momento do cadastro é gravada uma imagem padrão e quando o usuário estiver em seu perfil ele pode alterar os dados, inclusive a imagem. Preciso fazer com que ao clicar m um link (que aparece quando ele move o mouse sobre a imagem). O que eu queria é quando o usuário clicar sobre esse link, abrir a tela para seleção e quando o usuário escolher a imagem e clicar no botão Abrir a imagem seja trocado no BD.
Alguém poderia me dar uma luz. Desde já agradeço.
Edson Pereira
Curtidas 0
Respostas
Edson Pereira
20/10/2013
Para aqueles que leram esse post e tinha a mesma dúvida que eu, encontrei a solução:
1 - Cria o input file e o link:
<input id="upload" type="file"/>
<a href="" id="upload_link">Upload your photo</a>
2 - Função js para que o link se comporte como o input file:
$(function(){
$("#upload_link").on('click', function(e){
e.preventDefault();
$("#upload:hidden").trigger('click');
});
});
3 - CSS para ocultar o input file:
#upload_link{
text-decoration:none;
}
#upload{
display:none
}
Espero que ajude. Valeu
1 - Cria o input file e o link:
<input id="upload" type="file"/>
<a href="" id="upload_link">Upload your photo</a>
2 - Função js para que o link se comporte como o input file:
$(function(){
$("#upload_link").on('click', function(e){
e.preventDefault();
$("#upload:hidden").trigger('click');
});
});
3 - CSS para ocultar o input file:
#upload_link{
text-decoration:none;
}
#upload{
display:none
}
Espero que ajude. Valeu
GOSTEI 0
Joel Rodrigues
20/10/2013
Obrigado por compartilhar a solução.
Estou marcando o tópico como concluído para que sirva como fonte de pesquisa.
Estou marcando o tópico como concluído para que sirva como fonte de pesquisa.
GOSTEI 0