关闭 <input type="file"> 选择文件对话框和 onchange 事件之间存在大量延迟。浏览器有点冻结
And*_*ndy 12 html browser upload file freeze
有时我会遇到浏览器本机选择文件对话框的非常奇怪的行为。
我有一个<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;
}
</script>
</head>
<body>
<h1>File Input</h1>
<p>
Little demo to show/measure delay between closed file input dialog and
call of onchange event handler.
</p>
<input
type="file"
onclick="onClick()"
onchange="onChange(event.target.files[0])"
/><br /><br />
<div id="result"></div>
</body>
</html>
