我有链接，
<a id="upload-file">Upload your photo</a>
如果单击，我希望它充当浏览文件输入
<input id="upload-file" type="file"/>
我将如何做到这一点？
问问题
56149 次
8 回答
85
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');
});
});
于 2012-07-10T04:37:13.540 回答
17
仅 HTML
这是一个非常简单的答案，它不使用 CSS、Javascript/jQuery 并且不依赖任何框架基础设施。
<label>
<input type="file" style="display: none;">
<a>Upload Photo link</a>
</label>
甚至更简单
<label>
<input type="file" style="display: none;">
Upload Photo link
</label>
于 2019-03-25T01:43:59.590 回答
7
以下将解决问题
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();
});
于 2012-07-10T04:32:32.247 回答
4
你可以在没有 Javascript 的情况下做到这一点。具有属性的跨浏览器解决方案for：
HTML
<label for="inputUpload" class="custom-file-upload">Upload your file</label>
<input id="inputUpload" type="file" />
CSS
#inputUpload {
display: none;
}
.custom-file-upload {
cursor: pointer;
font-size: inherit;
color: #0c090d;
}
.custom-file-upload:hover {
text-decoration: underline;
}
于 2019-02-07T13:53:58.780 回答
2
你可以有一个隐藏的<input>标签，然后你可以调用$('#upload').click()它来模拟点击。
或者，您可以拥有一个具有 id 的隐藏<input>标签，然后只需将标签属性添加到您的链接。
于 2012-07-10T04:32:02.057 回答
1
在 Angular 6 中，你可以这样做，
<li class="list-group-item active cursor-pointer" (click)="file.click()">
<i class="fas fa-cloud-upload-alt"></i> Upload <input type="file" #file hidden />
</li>
当你点击 li html 标签时，会触发输入按钮的点击。“隐藏”属性使不可见。
于 2018-08-03T13:54:52.437 回答
0
编辑：
看到这个演示：http: //jsfiddle.net/rathoreahsan/s6Mjt/
查询：
$("#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;
}
或者
你可以使用这样的好插件：
于 2012-07-10T04:31:53.103 回答
-3
于 2012-07-10T04:30:08.270 回答