如何使一个链接行为作为文件输入

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

最好的一个 http://valums.com/ajax-upload/

Answer 3

编辑：

看到这个演示：http://jsfiddle.net/rathoreahsan/s6Mjt/

JQUERY：

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

HTML

<a href="javascript:void(0)" id="upload">Upload your photo</a> 
<input id="upload-file" type="file"/> 

CSS

#upload-file { 
    display:none; 
} 

OR

你可以用漂亮的插件，像这样：

http://blueimp.github.com/jQuery-File-Upload/

Answer 4

你可以有一个隐藏的<input>标签，你可以然后打电话给$('#upload').click()为了模拟点击。

或者，您可以隐藏<input>标记，该标记包含一个ID，然后只为您的链接添加标签属性。

Answer 5

下面将解决这个问题

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/