Access denied error in IE when submitting form through javascript

Question

@using (Html.BeginForm("Upload", "MyProfile", FormMethod.Post, new
{
    @encType = "multipart/form-data",
    id = "ImgForm",
    name = "ImgForm",
    target = "UploadTarget"
}))
{   
    <input type="file" name="FileUpload" class="filestyle-notext fileupload">                
}

<iframe id="UploadTarget" name="UploadTarget" style="position: absolute; left: -999em; top: -999em;"></iframe>

And through javascript/jquery, I am doing form submit on change of file input.

$('.myprofile .fileupload').change(function () {       
    $('#ImgForm').submit();
});

It throws an error: Access is denied and It happens only in IE (i am using ie8) and works fine in firefox, chrome.

After reading in forums I see there is an issue with form submit through javasript in IE due to security reasons but is there any workaround ? And I don't understand why the hell only IE does that when all browsers are supporting it. Is IE more secure than all browsers ? ;) Pool in your suggestions please.

Answer 1

IE8 doesn't support invoking the .submit() event of a form containing file inputs from within the .change() event of this file input. This is for security reasons. You are attempting to submit a file to the server without the user explicitly allowing this. One possible workaround is to call the .submit() on the form from within a .click() event of some button you have placed:

$('.uploadButton').click(function () {       
    $('#ImgForm').submit();
});

Now when the user clicks on some upload button the form will submit.

It's worth mentioning that this is only problematic with IE8. Higher versions and other browsers do not have this limitation.

Also you may consider using a Flash based upload control such as Uploadify or BlueImp File upload to upload files to the server in a cross browser way.