CODEWITHSUNDEEP
javascriptjqueryhtml
sonam Sharma
sonam Sharma

Reputation: 558

Input type file hidden click

I am attempting to use the following query to modify this upload button.

HTML:

 <input type="file" name="something" id="myfileid" style="display:none;">

I tried to use an image to replace the <input type="file"> "button".

 <img src="some/thing/url/here" onclick="$('myfileid').click();">

As you can see, here I am using ajax to redirect the click on image to file. Though it seems as if it doesn't work in the major browsers like Safari. Another Side Note: I have already added this code to many pages on my website already, so is there a simple solution in which I only have to add some Javascript? Thanks.

Upvotes: 5

Views: 6437

Answers (2)

Mi-Creativity
Mi-Creativity

Reputation: 9654

If it doesn't have to be solved in javascript, you can easily achieve this by wrapping the image within a label for="myfileid", just like this

JS Fiddle 

<label for="myfileid">
  <img src="//ninjaforms.com/wp-content/uploads/edd/2012/10/file-uploads1.png" width="250">
</label>
<input type="file" name="something" id="myfileid" style="display:none;">

Upvotes: 9

AsgarAli
AsgarAli

Reputation: 2211

<img src="some/thing/url/here" onclick="$('#myfileid').trigger('click'); return true;">

Upvotes: 2

Related Questions