单击文件上传按钮后延迟？答案

【问题标题】：Delay after clicking file-upload button?单击文件上传按钮后延迟？
【发布时间】：2016-03-22 22:01:22
【问题描述】：

当我点击“选择要上传的文件”（即输入类型=文件）时，在我点击按钮并选择文件到在按钮旁边显示选定文件之间存在延迟。浏览器是否尝试将文件加载到浏览器中？为什么会有延迟。

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

请帮忙。

【问题讨论】：

你能创建一个stacksn-ps来演示“延迟”吗？ “延迟”的持续时间是多少？
延迟可能是 1/4 秒到 2 秒或更多，具体取决于我尝试选择的文件的大小。我尝试了多台机器，看起来像标准延迟。从我选择文件到“选择文件”旁边显示的文件名（此示例适用于 chrome）。如果它是标准的或浏览器正在尝试读取该文件，我可以延迟，但我如何在浏览器开始读取文件之前拦截以显示“加载器”小部件。所有的 JQ 事件都是在浏览器红色文件之后发生的。
您可以使用change 事件来显示“Loader”小部件，然后在FileList 对象在change 处理程序中定义后删除小部件。文件的内容长度是多少？
我正在使用 500K 到 2M 左右的文件进行测试。我尝试了 $("input[type=file]").change(function(){ 并在延迟后触发。远程执行我需要的唯一方法是使用 $("#logox").click(function (e){ e.preventDefault(); $("input[type=file]").trigger("click"); }); 并传递控件进行更改，
上述问题是如果我在触发器之前使用 $.mobile.loader('show') 并且如果用户取消上传文件选择器（Windows 窗口），那么我无法取消它。无论哪种方式，我都很好奇浏览器发生了什么

【解决方案1】：

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

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

【讨论】：

这就接近了（PS：非常感谢您抽出宝贵的时间回复，非常感谢）。在代码 sn -p 1) 用户选择选择文件 2) 微调器启动 3) 用户选择文件 4) 微调器停止 5) 延迟发生 5) 文件准备好上传。 Spinner 在第 4 步停止，而不是在第 5 步之后。无论如何，此解决方案确实解决了如果用户未选择文件时如何停止的问题。
可能需要在 detach() 上有条件语句，if (file not selected then detach) else detach after upload etcc.. 完成
@RaviP 是的，您可以在change 事件中使用.detach() 来处理input type="file" 元素。在if 使用条件以获得预期结果
谢谢，我可能是错的，但更改事件是在延迟之后发生的 :( 我要玩一下，看看是否可以将更改事件包含在您建议的窗口事件中。

【解决方案2】：

我将 guest271314 的方法与另一种方法相结合以获得结果。我可以说，如果没有他的帮助，我不可能走到这一步。 on load on image 是保持加载器直到图像完全加载。

方法是

enter code here
$('#preview').bind("DOMSubtreeModified",function(){
    $('#preview').find('img')
        .on('load', function() { $.mobile.loading('hide'); });
});

【讨论】：

【解决方案3】：

这就是我要做的事情： HTML：

<input class="fileUploadBtn" name="image" type="file"/>

Javascript/Jquery：

$(".fileUploadBtn").click(function() {
//Your code here to show please wait
$('input[type=file]').change(function(e){
// Your code here to hide please wait
});

【讨论】：