在Chrome版本72.0.3626.96中,我有一个简单的例子,我设置了一个锚<a>(使用bootstrap设计为按钮),我也设置了一个<input type="file">.我隐藏了<input type="file">使用CSS,然后在单击锚点时使用一些JavaScript来触发文件选择对话框.
例如:
$('#upload-button').on('click', function(e) {
if (confirm('Are you sure?')) {
$('#upload-file').trigger('click');
}
});#upload-file {
display: none;
}<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col">
<a id="upload-button" class="btn btn-primary">
<span>Upload Something!</span>
</a>
<input type="file" id="upload-file">
</div>
</div>
</div>它应该工作的方式是用户点击<a>按钮,这将启动一个确认对话框,然后,用户单击"确定",这将打开文件选择对话框.
这适用于Firefox和早期版本的Chrome,奇怪的是它甚至可以在Chrome版本72.0.3626.96中使用,只要您在确认消息打开后足够快地单击确定消息中的"确定"按钮即可.
问题是,如果您在确认消息打开后等待2-4秒,然后单击"确定",则不会打开文件选择对话框.
有关如何使这项工作的任何想法？这个Chrome版本中是否应该提交这是一个合法的错误？
更新:我已经得出结论,这是很可能以某种方式与使用者启动的安全更新(虽然我不知道具体为什么)......然而似乎从长远来看,更容易和更清洁反正只需更换老同学confirm()用更现代的模态方法.单击引导模式中的实际按钮似乎始终正常工作.
新例子在这里:
$('#upload-button').on('click', function() {
$('#upload-confirm-modal').modal();
});
$('#upload-confirm-button').on('click', function() {
$('#upload-file').trigger('click');
$('#upload-confirm-modal').modal('hide');
});#upload-file {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> …