Javascript 从浏览器中选择多个文件时显示加载动画

我正在使用HTML5

input type=“file”

和

multiple

属性。当用户选择多个文件时，最多需要10秒钟，直到引发更改事件，此时屏幕冻结。我想在所有文件上载到浏览器时显示加载动画

<input type="file" multiple name="files" />

我试图检测用户单击“取消”时，所有解决方案对我都不起作用（以及 )。我还考虑过在用户单击按钮时向文件对象添加一个虚拟文件，以便在未选择任何内容时触发更改事件（因为它会将列表更改为空列表），但我发现无法设置文件列表对象（如果该对象不包含现有文件或空文件）或向其推送虚拟文件

我实际上在使用angularJs，并将在指令中使用此代码，但我想在这里简化一些事情

有什么想法吗

var input = document.querySelector("input[type=file]");
input.addEventListener("change", function(event) { 
// do stuff with files...       
hideLoader();
})

input.addEventListener("click", function(event) {
showLoader()    
})