How to make a link act as a file input

HTML

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

CSS

#upload{
    display:none
}

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

DEMO.

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>

following will solved the problem

html

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

css

#upload-file{
    display: none;
}

$("#fileupload").click(function(){
    $("#upload-file").click();
});

http://jsfiddle.net/WXBKj/

Related