javascript - Delay after clicking file-upload button? - Stack Overflow

admin管理员组

文章数量:1336633

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.

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.

Please help.

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.

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.

Please help.

• javascript
• jquery
• browser-cache

Share Improve this question Follow edited Mar 22, 2016 at 22:38 Omar 31.7k99 gold badges7272 silver badges116116 bronze badges asked Mar 22, 2016 at 22:01 Ravi PRavi P 16722 silver badges77 bronze badges 9

• Can you create a stacksnippets to demonstrate "delay" ? What is duration of "delay" ? – guest271314 Commented Mar 22, 2016 at 22:13
• Delay is probably 1/4th of a second to 2 seconds or more depending on the size of the file I am trying to select. I tried with multiple machines and looks like standard delay. From the time I select the file to the file name displayed next to "Choose File" (this example is for chrome). I am OK with delay if it's standard or browser is trying to read that file, but how do I intercept to display the 'Loader' widget before the browser start reading file. All JQ events are happening after the browser red the file. – Ravi P Commented Mar 22, 2016 at 22:21
• You could use change event to show "Loader" widget, then remove widget once FileList object is defined within change handler. What is the content-length of the file ? – guest271314 Commented Mar 22, 2016 at 22:31
• I am using files around 500K to 2M to test. I tried $("input[type=file]").change(function(){ and it triggers after the delay. The only thing that remotely does what I need is by using $("#logox").click(function(e){ e.preventDefault(); $("input[type=file]").trigger("click"); }); and passing the control to change, – Ravi P Commented Mar 22, 2016 at 22:35
• The issue with above is if I use $.mobile.loader('show') just before the trigger and if the user cancels the upload file selector (windows window) then I have no way to cancel it. Either way I am curious what's happening with browser – Ravi P Commented Mar 22, 2016 at 22:36

 |  Show 4 more ments

3 Answers 3

Sorted by: Reset to default 1

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./ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<button>choose file</button>
<input type="file" style="opacity:0;"/>

This is what I got to work: 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
});

I bined the approach from guest271314 with another method to get the results. I can say I could not have been able to get this far with out his help. on load on image is holding the loader till the image is pletely loaded.

The method is

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

本文标签： javascriptDelay after clicking fileupload buttonStack Overflow