Can't upload file in Internet Explorer using JQuery Form plugin

Question

I'm using JQuery Form Plugin to upload a file together with PHP, everything works perfectly in Firefox, but in Internet explorer is does not do anything if I submit the form.

My code is below

<script type="text/javascript">
    <!--
    $(document).ready(function() { 
        var options = {
        target: '#message',
        url:'../includes/ajax/import.php?import=1',
        beforeSubmit: function() {
            $('#uploader').html('<div style="padding-top:10%"><center><img src="../domain/images/ajax-loader.gif" border="0" /></center></div>');
            $('#message').toggle();
        },
        success:  function() {
            $("#message").removeClass("message").addClass("messageResponse");
            $('#message').toggle();
            $('#uploader').html('');
        }
        };
        $('#upload').ajaxForm(options);

    }); 


    //-->
</script>

<div id="message" class="message">
    <form name="upload" id="upload" action="#" method="POST" enctype="multipart/form-data">
        <table cellpadding="4" cellspacing="4" border="0">
            <tr>
                <td colspan="3"><h1>Map Clients <i>(Import CSV File)</i></h1></td>
            </tr>
           <tr>
                <td class="fieldLabel" nowrap>File:</td>
                <td nowrap><input type="file" name="fileToUpload" id="fileToUpload" />&nbsp;*</td>
                <td nowrap id="errorFile" class="error"></td>
            </tr>
            <tr>
                <td nowrap colspan="3"><button id="mapClients">Map Clients</button></td><td nowrap id="errorFile" class="error"></td>
            </tr>   
        <tr>
        <td colspan="3"><input type="hidden" value="1" id="type" name="type" /></td>
        </tr>
        </table>
    </form>
</div>
<div id="uploader"></div>

Now my problem is that I can't figure out why IE 7 is not doing anything when I click on my form submit button

Answer 1

I seem to recall running into the same problem. Try this:

$(document).ready(function() { 
    var options = {...
    /*abridged for clarity*/

    $('#upload').submit(function() {
        $(this).ajaxSubmit(options);
        return false;
    });
}); 

Answer 2

Had a similar problem with IE as well. In my case the problem was happening because I was disabling the file input element (input[type=file]) in beforeSend (for cosmetic and usability reasons). Only IE had a problem with the input element being disabled.

Answer 3

I found the issue

In my HTML I had something like this

        <tr>
            <td nowrap colspan="3"><button id="mapClients">Map Clients</button></td><td nowrap id="errorFile" class="error"></td>
        </tr> 

I changed it to

        <tr>
            <td nowrap colspan="3"><input type="submit" id="mapClients" value="Map Clients" /></td><td nowrap id="errorFile" class="error"></td>
        </tr> 

And the problem was solved

Answer 4

I had a problem with the JQuery Form Plugin in ie8. The piece of code that started the "ajax form" was located in a "dynamical div" that was updated later then the main page. Moving that call to the main page got ie8 working for me.