javascript - 在 Chrome 中打开文件对话框之前，可以多次单击文件输入

Question

我有一个包含在按钮中的文件输入，如下所示。

.fileUploadButton input[type="file"] {
    right: 0;
    top: 0;
    font-size: 100px;
    position: absolute;
    outline: none;
    opacity: 0;
    cursor: pointer;
}

.btn {
    display: inline-block;
    padding: 6px 12px;
    text-align: center;
    cursor: pointer;
    border: 1px solid transparent;
}

.btn-success {
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
}

.btn-success:hover {
    color: #fff;
    background-color: #449d44;
    border-color: #398439;
}

.fileUploadButton {
    position: relative;
    overflow: hidden;
}

    <span class="btn btn-success fileUploadButton">
        File Upload Button
        <input type="file" name="file" accept="application/zip">
    </span>

有时单击此按钮后，文件对话框会在延迟 10 秒后打开。在等待文件对话框打开时，UI 不会被阻塞，并且可以多次单击按钮，这会导致在关闭另一个文件对话框后打开更多文件对话框。

这似乎是第一次发生，并且在 Chrome session 中只发生一次，之后我无法重现。它不能以明确的方式复制。我在包括 59 版在内的多个 Chrome 版本中观察到了这一点。

这是一个已知错误吗？有什么解决方法吗？复制的最终步骤是否已知？

编辑:

Answer 1

我认为这是因为您的硬盘驱动器处于 sleep 模式。它停止了。每当您单击文件按钮时，您就要求浏览器要求操作系统访问文件系统，并且操作系统必须唤醒磁盘。它需要几秒钟才能启动、初始化访问和所有操作。显然，这不会发生在 SSD 驱动器上。