Question

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

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

请帮忙。

Answer 1

方法是使用button元素在click兄弟input type="file"对话框上触发Open File;将“正在加载”小部件附加到文档;利用.one()将focus事件附加到$(window)，以便在用户选择文件或关闭{{1}后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()
  })
});

Answer 2

我将来自guest271314的方法与另一种方法相结合以获得结果。我可以说，在他的帮助下，我无法做到这一点。 on image 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 });

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

3 个答案: