Open / Execute input file - jQuery

Question

Open / Execute input file - jQuery

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

How can I open / execute an input file using jQuery ?! I have a php code that has the input file its 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 something like this: p>

$(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><imgsrc="http://www.fundosanimais.com/Imagens/imagens-lobos.jpg">

jquery html5 css

asked by anonymous 02.12.2017 / 20:15

2 answers

0

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

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 .imginput element is clicked.

JS

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

and finally user this css to hide the inputfile

CSS

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

02.12.2017 / 20:35

Union of Vectors in C Form send JS to a PHP

score 1 · Accepted Answer

With the trigger () method, you can bind the click event of an 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><imgsrc="http://www.fundosanimais.com/Imagens/imagens-lobos.jpg">

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