abrir campo file (oculto) ao clicar em uma imagem

[Rafael A. R. Dias 0]

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!

 

[macielcr7 9]

você pode fazer assim

 

 

document.getElementById('foto').style.display="block"; // <-- MOSTRAR
//ESCONDERR -->  document.getElementById('foto').style.display="none";

[Rafael A. R. Dias 0]

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...

[macielcr7 9]

Baixe o plugin da Jquery

e com isso abaixo é só você adaptar ok.!

 

$('#img').click(function(){
  $('#foto').click();
});

[Rafael A. R. Dias 0]

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