如何使链接充当文件输入

Question

我有一个链接,

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

如果点击,我希望它充当浏览文件输入

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

我怎么做到这一点？

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>

Answer 3

以下将解决问题

HTML

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

CSS

#upload-file{
    display: none;
}?

JS

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

http://jsfiddle.net/WXBKj/