CODEWITHSUNDEEP
javascriptjqueryhtmlformsfile-upload
Robert
Robert

Reputation: 1907

jQuery form auto-submit upon file input change in IE

This topic has been covered on this forums, but I haven't found a working IE solution yet (tested 7, 8 & 9). Works fine in other browsers. I hope someone has a solution for it. Thanks in advance!

What's this about:

I want to get rid of the standard file input element so I added an image. Upon click it shows the browse window. When a file is selected the form is submitted. Due to browser security I temporarily show the file input element, focus and the hide it.

The problem:

IE shows "Access is denied." jquery.1.7.2.js line 3241, character 6. Without the show/hide trick, the problem remains. When I click on the browse button and choose a file, the form does get submitted. The problem seems to be that the file browsing action is triggered by another element:

Full code:

    $('#fakeupload').click(function(){
        $('#form').show();
        $('#realupload').focus().trigger('click');
        $('#form').hide();          
    });

    $('#realupload').change(function(){
        $('#form').show();
        $('#form').submit();
        $('#form').hide();          
    });

Upvotes: 3

Views: 3810

Answers (3)

Axl Laruse
Axl Laruse

Reputation: 21

Internet Explorer 8 is blocking you with 'Access Denied' since a group of no-so-smart people in Microsoft made the decision.

If you try to trigger the click method in an input type file, then later you will have issues in the submit.

This is the only browser that do that kind of stuff.

Thanks again Microsoft, your browser is a "piece of work" >:(

Upvotes: 1

Robert
Robert

Reputation: 1907

This remains an issue that can't be solved. In order for it to work, the browse button must be clicked by the user. The trick here is modifying the browse button so it will fit the image.

Upvotes: 0

Charles
Charles

Reputation: 648

Did you try assigning permissions for your file to be accessed by the browser? Did you clear your cache? Try setting an expiry date? Try replacing show()/hide() with css("display","block")/css("display","none")

Upvotes: 0

Related Questions