Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Ola pessoal, minha dúvida é a seguinte. Tenho a tela mostrada abaixo e gostaria que quando o usuário clicasse no icone do meio da parte de fotos (upload) tivesse o mesmo efeito de quando ele aperta em 'selecionar arquivo' do campo input[type=file] que existe com o id 'foto_branca' mas encontra-se oculto.
Existe como fazr isso?
Muito obrigado a qualquer ajuda!
/applications/core/interface/imageproxy/imageproxy.php?img=http://www.rafael.descodificando.com.br/postado_em_foruns/abrir_file_automatico.png&key=cac28ef3dfce2278ab66a2939d9f1acc4edb5a154b6cdfad7d46b6d62f4dadcb" alt="abrir_file_automatico.png" />
ola macielcr7,
acho que não fui claro...
oq preciso não é exibir/ocultar o campo file (ele sempre deve estar oculto) o que quero é que apareça a janela de seleção de arquivo como se o usuário tivesse clicado no botão 'selecionar arquivo'
eu tentei usar o focus, mas no caso ele apenas seleciona o botão...
Baixe o plugin da Jquery
e com isso abaixo é só você adaptar ok.!
$('#img').click(function(){
$('#foto').click();
});Ola novamente,
Eu já utilizo o JQuery no site
na vdd eu já habia tentado este método, mas não funcionou
pelo que sei, ele serve para atribuir um evento do tipo click, nao para chamar...
para facilitar vou deixar abaixo o todo o código (html, css e js)
<tr>
<td class="legenda">Fotos:</td>
<td>
<div class="foto" id="foto_branca">
<div class="img">
<img src="../../../inc/img/foto.png"/>
<input type="file" name="foto_branca_file"/>
</div>
<div class="opcoes" id="foto_branca">
<div id="capa" class="opcao capa" title="Marcar foto como capa do produto"></div>
<div id="atualizar" class="opcao atualizar" title="Atualizar nova imagem aqui"></div>
<div id="deletar"class="opcao deletar" title="Deletar foto"> </div>
</div>
</div>
</td>
</tr>CSS
/ Fotos do produto /
.foto
{
float: left;
width: 128px;
margin: 10px;
border: 1px #FFFFFF outset;
padding-top: 5px;
background-color: #EF9679;
}.foto:hover
{
border-style: inset;
}/ Imagens das fotos do produto /
.foto .img
{
width: 100%;
border-bottom: 1px outset #DF3430
}
/ Lista de opções das fotos do produto /
.foto .opcoes
{
float: left;
width: 100%;
}.foto .opcoes .opcao
{
float: left;
width: 32px;
height: 32px;
margin: 5px;
cursor: pointer;
}/ Opção de deletar das fotos do produto /
.foto .opcoes .deletar
{
background-image: url(../../../inc/img/foto_deletar.png);
}/ Opção de marcar como capa das fotos do produto /
.foto .opcoes .capa
{
background-image: url(../../../inc/img/foto_capa.png);
}/ Opção de atualizar das fotos do produto /
.foto .opcoes .atualizar
{
background-image: url(../../../inc/img/foto_atualizar.png);
}.foto .img input[type=file]
{
display: none;
}JS
// Aplicando evento 'click' ao botao de atualizar da foto em branco
//
$ ( '#foto_branca #atualizar' ) . bind ( 'click' , function ( )
{
// AQUI QUE DEVE SER ATIVADA A CAIXA DE SELEÇÃO DE ARQUIVO */
$ ( '#foto_branca_file' ) . click ( );
} );
você pode fazer assim
document.getElementById('foto').style.display="block"; // <-- MOSTRAR
//ESCONDERR --> document.getElementById('foto').style.display="none";