javascript - Chrome 浏览器版本 72.0.3626.96 错误触发<输入类型 ="file"> 从 javascript 函数单击(文件选择对话框)

Question

在 Chrome 版本 72.0.3626.96 中，我有一个简单的例子，我设置了一个 anchor <a> (使用 Bootstrap 将样式设置为按钮)并且我还设置了一个 <input type="file"> .我隐藏了 <input type="file">使用 CSS，然后使用一些 JavaScript 在单击 anchor 时触发文件选择对话框。

例如:

$('#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 团队已将此问题解决为按设计，并指出这是一项有意更改，以防止用户激活标志保持设置的时间过长。 crbug.com/936505

我已经要求他们考虑为这种情况添加一个控制台警告，以帮助 future 的调试人员。