Open/Run input file - jQuery

Question

How can I open/Run an input file using jQuery?! I have a php code that has the input file your css display:none;(Invisible), I need that when I click on an element, for example an image the input file is executed as if I had clicked on it the code would look like this:

$(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">

Answer 1

With the method Trigger() it is possible to link the event click from one element to another element on the same page.

$(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" />

Answer 2

Put your inputfile on the page inside the class div .hiddenfile

HTML

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

Adds a javascript function that triggers the input when the class element .imginput is clicked.

JS

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

and finally user this css to hide inputfile

CSS

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