jQuery hidden iframe File upload

Question

We're attempting to upload a file using a hidden iframe and the script runs in all browsers except IE(9).

• The user clicks on a link
• Link triggers file input to open
• File input change triggers form submit
• Form submits to iframe

IE9 developer tool returns the following error message:

SCRIPT5: Access is denied.
jquery-latest.js, line 2977 character 6

Looking around, it seems to be an error that occurs alongside the jQuery change() event. Fairly sure it must be a simple solution... Many thanks if you are able to help!

HTML

<form class="hidden" action="index.php?upload" method="POST" id="myForm" enctype="multipart/form-data" target="hidden_iframe">
    <input type="file" name="userfile" id="userFile">
    <input type="submit">
</form>

<iframe id="hidden_iframe" class="hidden" name="hidden_iframe" src="inc/temp.html"></iframe>

Javascript

$('#fake').on("click",function(e){
    e.preventDefault();
    $('#userFile').click();
    return false;
});
$('#real').on("change",function(e){
    e.preventDefault();
    $("#myForm").submit();
});

Answer 1

This is IE security setting. Just go to Settings->Internet Options->Security->Custom Level and change security settings under "Miscellaneous" set "Access data sources across domains" to Enable.

EDIT:

I just saw what's the problem. You're triggering the file upload and you're not allowed to do that. You need to let the user manually click the file-selector button.

Answer 2

Maybe you should consider an alternate solution altogether?

Uploading through a hidden iframe isn't the best way to do this nowadays.

Have a look at this awesome lib instead: http://www.plupload.com/