有时我会遇到浏览器本机选择文件对话框的非常奇怪的行为。
我有一个<input type="file" onchange="console.log(event.target.files)" />上传单个文件的元素。
onchange通常，在“选择文件”对话框中选择文件后，该事件会立即触发（分别在几毫秒后）。
但有时浏览器会冻结，并且需要长达 10 秒的时间才能onchange调用该事件。
我注意到一件事：如果我的 Windows 资源管理器快速访问工具栏中有一个无法访问的网络驱动器（因为我没有连接 VPN），那么这种大规模延迟问题会更频繁地发生（尽管我确实选择了一个文件）在我的桌面上与此网络驱动器无关）。
所有主要浏览器（Chrome、Edge、Firefox）都是如此，因此它可能与 Windows 操作系统有关。
还有其他人面临这个问题吗？
最小可重现示例：
<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript">
let timestamp;
function onClick() {
window.addEventListener('focus', fileDialogClosed);
}
function fileDialogClosed() {
document.getElementById('result').innerHTML =
'File Dialog closed.<br />';
timestamp = new Date().getTime();
window.removeEventListener('focus', fileDialogClosed);
}
function onChange(file) {
let delay = new Date().getTime() - timestamp;
document.getElementById('result').innerHTML +=
'onchange event called with delay of <strong>' +
delay +
'ms</strong>';
document.body.querySelector('input').value = null; …为了处理网站上的文件上传，我们必须使用隐藏<input type="file" />元素。
要找出在“选择文件”对话框中选择了哪个文件，我们可以使用该onchange事件。
但是我们如何检测用户是否点击了取消按钮呢？不幸的是，没有任何oncancel活动。
有很多解决方法可以检测用户是否按下了取消按钮，但由于我在这里描述的问题，它们都没有可靠地为我工作。