我有一个隐藏的文件输入元素。是否可以从按钮的单击事件触发其选择文件对话框?
发布于 2011-12-22 04:02:50
如果你想用自己的按钮来上传文件,而不是使用<input type="file" />
,你可以这样做:
<input id="myInput" type="file" style="visibility:hidden" />
<input type="button" value="Show Dialog" onclick="$('#myInput').click();" />
注意,我使用的是visibility: hidden
,而不是display: none
。不能对未显示的文件输入调用click事件。
发布于 2015-06-04 23:32:20
仅供记录,还有一种不需要javascript的替代解决方案。这有点像黑客,利用了这样一个事实,即点击标签会将焦点设置在关联的输入上。
您需要一个具有适当for
属性(指向输入)的<label>
,其样式可选地类似于一个按钮(对于bootstrap,使用btn btn-default
)。当用户单击标签时,对话框打开,例如:
<!-- optionnal, to add a bit of style -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<!-- minimal setup -->
<label for="exampleInput" class="btn btn-default">
Click me
</label>
<input type="file" id="exampleInput" style="display: none" />
发布于 2011-12-22 03:48:09
我不确定浏览器如何处理type="file"
元素上的点击(安全问题等等),但这应该是可行的:
$('input[type="file"]').click();
我在Chrome,Firefox和Opera上测试过this JSFiddle,它们都显示了文件浏览对话框。
https://stackoverflow.com/questions/8595389
复制相似问题