javascript - 单击文件上传按钮后出现延迟？

Question

当我单击“选择要上传的文件”(即输入类型=文件)时，从单击按钮和选择文件到在按钮旁边显示所选文件之间存在延迟。浏览器是否正在尝试将文件加载到浏览器中？为什么有延迟。

接下来，如何在选择文件后立即显示“请稍候..”消息。我尝试了各种 JQ 选项，似乎都在初始延迟后触发(正如我所说，可能是浏览器正在尝试加载不确定的文件)我想用加载器小部件/消息来覆盖延迟。

请帮忙。

Answer 1

方法是使用button到要触发的元素 click上input type="file" Open File 的 sibling 对话;将“正在加载”小部件附加到文档；利用.one()附加focus事件至$(window)当 window 时删除“正在加载”小部件恢复focus用户选择文件或关闭 Open File 后对话框。

$("button").click(function() {
  var spinner = $("<img />", {
    "id": "spinner",
    "src": "data:image/gif;charset=binary;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH+GkNyZWF0ZWQgd2l0aCBhamF4bG9hZC5pbmZvACH5BAAKAAAAIf8LTkVUU0NBUEUyLjADAQAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQACgABACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkEAAoAAgAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkEAAoAAwAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkEAAoABAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQACgAFACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQACgAGACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAAKAAcALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA=="
});
  $(this).after(spinner).nextAll("input:first").click();
  $(window).one("focus", function() {
    $("#spinner").detach()
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<button>choose file</button>
<input type="file" style="opacity:0;"/>