Why does my form not upload files in Internet Explorer 9?

Question

Welcome to episode 32,342,343 of "Why does Internet Explorer Suck So Much?"...

I've seen lots of reports that IE9 does a crappy job uploading files. Apparently it has lots of caveats about when it will or won't work (If someone has a definitive list I'd love to see it). However, most of the problems/solutions I see have found are related to javascript, usually the jQuery form plugin or something similar.

My form is not submitted via AJAX and the the file input field is not hidden or obscured with css. Yet, I get several support tickets per day from users on IE9 trying to submit the form and "nothing happens" (=the form submits. No errors, but the file is not uploaded.) I haven't gotten a single complaint with a different browser, and IE8 even seems to work (as well as it ever does).

Here's the top of my form. Am I missing something?

<form action="http://mysite.dev/account-settings/?open=resume" method="post" class="wpjb-form" enctype="multipart/form-data">    

        <input type="hidden" name="resume_form" value="resume_form" />
        <fieldset class="wpjb-fieldset-default">

            <input id="firstname" name="firstname" type="hidden" class="regular-text " value="John" />
            <input id="lastname" name="lastname" type="hidden" class="regular-text " value="Henry" />
            <input id="email" name="email" type="hidden" class="regular-text " value="[email protected]" />

            <div class="wpjb-element-input-checkbox wpjb-element-name-is_active">
                <label class="wpjb-label">Show resume? </label>
                <div class="wpjb-field">
                    <label for="is_active_1"><input type="checkbox" class="" name="is_active" id="is_active_1" value="1" checked="checked" /> Yes <small style="display:inline;">(Uncheck to hide your resume)</small></label>

                </div>
            </div>
            <div class="wpjb-element-input-select-one wpjb-element-name-file">
                            <label class="wpjb-label">Upload a <i>new</i> resume file</label>
                <div class="wpjb-field">
                    <input style="line-height:1em;" id="file" name="file" type="file" class="regular-text " />
                    <small class="wpjb-hint">Accepted file types: doc, docx, odf, pdf, rtf</small>
                </div>
            </div>
        </fieldset>
        ...

It goes on like this with a couple more <fieldset>s then ends like this:

    ....
    <p class="submit">
        <input type="submit" name="Submit" id="wpjb_submit" value="Save Changes" />
    </p>
</form>

Update I'm happy for everyone who has never experienced this problem but it's not just me: http://answers.microsoft.com/en-us/ie/forum/ie9-windows_vista/cannot-upload-files-using-internet-explorer-9/5724d921-ae71-e011-8dfc-68b599b31bf5

Update2 I'm seeing a lot of suggestions to add a meta tag to force the user agent to IE8... <meta http-equiv="X-UA-Compatible" content="IE=8" /> I don't want to do this because although I do support IE8, many of the elements on my site render differently in IE8 vs. IE9. This would create a rather sloppy user experience as any IE users would experience I temporary "time warp" back to IE8 on that specific page.

Answer 1

I was able to fix this nightmare of a problem by wrapping a jQuery form submit in a setTimeout:

$('#complete_profile input[type="submit"]').click(function(){
  setTimeout(function() {
    $('#complete_profile form').submit();
  }, 0);
});

This may cause duplicate submission when the form DOES submit, however, so be careful.