我有一個鏈接,如何使一個鏈接行爲作爲文件輸入
<a id="upload-file">Upload your photo</a>
如果點擊了,我希望它作爲一個瀏覽文件輸入
<input id="upload-file" type="file"/>
我將如何完成這個?
我有一個鏈接,如何使一個鏈接行爲作爲文件輸入
<a id="upload-file">Upload your photo</a>
如果點擊了,我希望它作爲一個瀏覽文件輸入
<input id="upload-file" type="file"/>
我將如何完成這個?
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');
});
});
編輯:
看到這個演示: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
你可以用漂亮的插件,像這樣:
你可以有一個隱藏的<input>
標籤,你可以然後打電話給$('#upload').click()
爲了模擬點擊。
或者,您可以隱藏<input>
標記,該標記包含一個ID,然後只爲您的鏈接添加標籤屬性。
請給出你的第二個選項的例子。 – Pyol7 2017-08-12 23:28:23
下面將解決這個問題
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();
});
真的很聰明的解決方案。它顯然是正確的答案,而且我會花幾個小時從頭開始嘗試解決這個問題。謝謝。 – usumoio 2014-12-31 18:51:55
歡迎和新年快樂@usumoio :-) – 2014-12-31 20:53:36