Question

在Chrome版本72.0.3626.96中，我有一个简单的示例，其中设置了锚点<a>（使用引导程序设置为按钮样式），并且还设置了<input type="file">。我使用CSS隐藏了<input type="file">，然后在单击锚点时使用了一些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

我已要求他们考虑针对这种情况添加控制台警告，以帮助将来的调试器。

Chrome浏览器版本72.0.3626.96错误触发javascript函数中<input type =“ file” />单击（文件选择对话框）

1 个答案: