How to make a link act as a file input

Question

I have a link,

<a id="upload-file">Upload your photo</a> 

And if clicked, I want it to act as an browse file input

<input id="upload-file" type="file"/> 

How would I accomplish this?

Answer 1

HTML

<input id="upload" type="file"/> <a href="" id="upload_link">Upload your photo</a>​ 

CSS

#upload{     display:none } 

JS

$(function(){     $("#upload_link").on('click', function(e){         e.preventDefault();         $("#upload:hidden").trigger('click');     }); }); 

​DEMO.

Answer 2

HTML Only

Here's a pretty simple answer that works with no CSS, Javascript/jQuery and doesn't rely on any framework infrastructure.

<label>   <input type="file" style="display: none;">   <a>Upload Photo link</a> </label> 

or even simpler

<label>   <input type="file" style="display: none;">   Upload Photo link </label>