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

Solution 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()
  })
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><button>choose file</button><inputtype="file"style="opacity:0;"/>

Solution 2:

I combined 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 completely loaded.

The method is

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

Solution 3:

This is what I got to work: HTML:

<inputclass="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
});