如何使一個鏈接行爲作爲文件輸入

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/