jQuery form plugin doesn't work in IE

Question

I'm using jQuery form plugin to upload files via ajax. I've tested the scripts and it works in all browsers except IE.It seems that in IE nothing happens(events & ...). I'm working for hours, still no luck.

PHP:

echo $this->input->post('name');//this is a debuging statement which shows the data sent by client

JS:

$("input[type=file]").on('change',function(){
    $(this).parents('.fileinput-wrapper').find('.fileinput-preview').css('background','url(http://localhost/project/assets/images/ajax-loader.GIF) no-repeat center center');
    var selectedElement = this;
    var name = $(this).attr('name').toString();
    $('#upload').ajaxSubmit({
        //dataType:'json',
        data: {name:name},
        success: function(data) {
            $(selectedElement).parents('.fileinput-wrapper').find('.fileinput-preview').css('background',"url('http://localhost/project/assets/images/loading.png') no-repeat center center");
            return false;
        },
        error : function(xhr) {
            alert(xhr.responseText);
            return false;
        }
    });
});

What should I do? (Thanks for help.)

Answer 1

Internet Explorer 9 and below doesn't support the XMLHttpRequest Level 2 protocol. This is required by jQuery to upload files asynchronously. You'll have to use an iFrame or disable the upload functionality for users with legacy IE browsers.

You can use conditional comments to test for older versions of IE. Add the following to your JavaScript:

var div = document.createElement("div");
div.innerHTML = "<!--[if lte IE 9]><i></i><![endif]-->"; 

If the variable "div" is set with the <i></i> value then you're dealing with an old version of IE