HTML/JS-上传文件:只有在文件资源管理器关闭后才显示加载程序

Question

我有一个输入(type=file(、div和图标元素

<i id="hexfile-upload-btn" class="material-icons icon upload-icon">file_upload</i>
<input id='hexfile-fileid' type='file' hidden/>
<div id="hexfile-loader" class="loader"></div> 

其中icon元素附带了一个eventlistener。js代码为：

function setup() {
document.getElementById('hexfile-upload-btn').addEventListener('click', function(){
openDialog('hexfile-fileid')
});
}
function openDialog(file-upload-id) {
document.getElementById(file-upload-id).click();
document.getElementById('hexfile-loader').style.display = "inline-block"
document.getElementById(file-upload-id).addEventListener('change', function(){
updateTextBox(...)
});
}

按照目前的代码，只要用户单击图标元素(例如打开文件资源管理器窗口(，就会显示我的加载器元素。

我希望loader元素只有在文件资源管理器窗口关闭并且文件实际上传后才会显示。一旦文件真正上传，我就会隐藏加载程序。

所以我想我需要以某种方式收听用户实际按下"；打开"；文件资源管理器的按钮？遗憾的是，我不知道该怎么做。或者还有其他方法吗？

任何关于如何解决这一问题的意见都将不胜感激！非常感谢。

Answer 1

将显示加载程序的代码移动到更改处理程序内部，这样在选择文件时就会显示加载程序

function setup() {
document.getElementById('hexfile-upload-btn').addEventListener('click', function(){
openDialog('hexfile-fileid')
});
}
function openDialog(file-upload-id) {
document.getElementById(file-upload-id).click();
document.getElementById(file-upload-id).addEventListener('change', function(){
document.getElementById('hexfile-loader').style.display = "inline-block"
updateTextBox(...)
});
}