1

I recently implemented a jQuery / iframe solution to file uploading and have run into a rather annoying issue (only in IE of course).

Upon clicking my upload button and selecting a file to upload, I automatically submit the form that contains the file to my iframe. However - I am required to click anywhere on the page in order for the submit to process and fire the action in my Controller.

I believe it is an issue with the iframe gaining focus, which seems to be stopping the 'change' function from finishing execution, but I am not entirely sure. Perhaps some type of onload function is required for the iframe to kick the focus back to the original page to continue execution?

Code:

Form & File Upload:

<form id="attachForm" action="<%= Url.Action("TestUpload","Images") %>" 
      method="post"  enctype="multipart/form-data" target='upload_target' >
        <input id='actualupload' type='file' multiple="" name='file' />
</form>
<iframe id='upload_target' name='upload_target' src='' 
        style="width:0; height: 0; border: 0;" frameborder="0"></iframe>

jQuery to Submit Form:

$("#actualupload").live('change',function()
{
    $("#attachForm").submit();
    alert("Fired!"); //This only occurs after clicking on the screen after the 
                     //file selection.
});

1 Answer 1

3

It seems that .live() causes this strange behavior. If you use i.e.

$(function() {
    $("#actualupload").change( function()
    {
        $("#attachForm").submit();
        alert("Fired!"); //This only occurs after clicking on the screen after the 
                         //file selection.
    });
});

it works in IE too.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.