单击文件上传按钮后是否延迟? [英] Delay after clicking file-upload button?

问题描述

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

When I click on "Select File to Upload" (i.e. input type=file) there is a delay between the time I clicked the button and selected the file to displaying selected file next to the button. Is the browser trying load the file into browser ?? Why is there a delay.

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

Followup to that, how can I display a "please wait.." message immediately after selecting the file. I experimented with various JQ options all seem to be triggering after the initial delay (as I said may be browser is trying to load the file not sure) I want to cover the delay with the loader widget/message.

请帮助.

推荐答案

方法是使用button来触发input type="file"对话框中的click元素，以触发click对话框.在文档中附加正在加载"小部件；当用户选择文件或关闭Open File对话框后window重新获得focus时，利用.one()将focus事件附加到$(window)以删除正在加载"小部件.

Approach is to use button to element to trigger click on input type="file" sibling to Open File dialog; append "Loading" widget to document; utilize .one() to attach focus event to $(window) to remove "Loading" widget when window regains focus following user selection of file or closing of Open File dialog.

$("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;"/>

这篇关于单击文件上传按钮后是否延迟?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！