从javascript函数触发<input type ="file">点击(文件选择对话框)的Chrome浏览器版本72.0.3626.96错误

Question

在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>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<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>

<!-- Modal -->
<div class="modal fade" id="upload-confirm-modal" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <h4>Are you sure?</h4>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
        <button type="button" class="btn btn-primary" id="upload-confirm-button">Yes</button>
      </div>
    </div>
  </div>
</div>

Answer 1

Chrome 团队已经解决了这个问题，并By Design指出这是为了防止用户激活标志保持设置时间过长而有意进行的更改。crbug.com/936505

我已要求他们考虑为此场景添加控制台警告，以帮助将来的调试器。