Cannot upload file to Internet Explorer using jQuery Form plugin

Question

I use JQuery Form Plugin to upload a file with PHP, everything works fine in Firefox, but it doesn’t do anything in Internet Explorer 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 not understand why IE 7 does nothing when I click the submit form button

Answer 1

I found a problem

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 resolved

Answer 2

I seem to recall how I am facing the same problem. Try the following:

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

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

Answer 3

JQuery ie8. , "ajax form", " div", . ie8, .

Answer 4

Had a similar problem with IE. In my case, the problem was due to the fact that I disabled the file input element (input [type = file]) in beforeSend (for reasons of cosmetics and usability). Only IE had a problem disconnecting the input element.