0

Como posso abrir/Executar um input file usando jQuery?! Possuo um código php que possui o input file seu css display:none;(Invisível), preciso que ao clicar em um elemento, por exemplo uma imagem o input file seja executado como se tivesse clicado nele o código ficaria mais ou menos assim:

$(document).ready(function(){
  $("img").click(function(){
    $("#im_us").executar();
  });
});
#im_us{
  display:none;
}
img{
  width:20%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://www.fundosanimais.com/Imagens/imagens-lobos.jpg">

2 Respostas 2

2

Com o método trigger() é possível vincular o evento click de um elemento para outro elemento na mesma página.

$(document).ready(function(){
  $("img").click(function(){
    self.executar();
  });
});

function executar(){
   $('#im_us').trigger('click');
}
#im_us{
  display:none;
}
img{
  width:20%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img src="http://www.fundosanimais.com/Imagens/imagens-lobos.jpg">

<input id="im_us" type="file" value="upload" id="uploadFile" class="uploadFile" />

0

Poe seu inputfile na pagina dentro da div de class .hiddenfile

HTML

<div class="hiddenfile">
  <input name="upload" type="file" class="imginput" id="#fileinput" />
</div>

Adiciona uma função javascript que aciona o input quando o elemento de class .imginput for clicado.

JS

$('.imginput').trigger('click'); 

e por fim user esse css para ocultar o inputfile

CSS

.hiddenfile {
 width: 0px;
 height: 0px;
 overflow: hidden;
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .