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

Question

当我单击 "Select File to Upload"（即输入类型=文件）时，从单击按钮并选择文件到在按钮旁边显示所选文件之间存在延迟。浏览器是否正在尝试将文件加载到浏览器中？？为什么会有延迟。

跟进，如何在选择文件后立即显示"please wait.."消息。我尝试了各种 JQ 选项似乎都在初始延迟后触发（正如我所说可能是浏览器正在尝试加载文件不确定）我想用加载器 widget/message.[=10= 来弥补延迟]

请帮忙。

Answer 1

方法是使用 button 元素来触发 input type="file" 兄弟 Open File 对话框中的 click；将 "Loading" 小部件附加到文档；利用 .one() 将 focus 事件附加到 $(window) 以在用户选择文件或关闭 [=] 后 window 恢复 focus 时删除 "Loading" 小部件15=]对话框。

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

Answer 2

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

方法是

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

Answer 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
});

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

Delay after clicking file-upload button?

javascript

jquery

browser-cache