Input type file hidden click

Question

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.

Answer 1

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;">