how to make new FormData() work on IE browsers

Question

How can I make this work on IE? This won't work on IE, new FormData() api is not supported by IE browsers, is there any other api equivalent to new FormData() in IE?

var fd = new FormData();
fd.append( "userfile", $("#userfile")[0].files[0]);

$.ajax({
    url : '/user/ajax_upload/',
    type: 'POST',
    contentType:false,
    cache: false,
    data: fd,
    processData: false,
    beforeSend :function(){
    },
    success : function( data ) {
        $('#popupbox').html(data);  
    }
});

Answer 1

Its better to use jquery form Js for submitting images over ajax. I found it better than FormData()

<script type="text/javascript" src="/js/jquery.form.js"></script>

function update_professional_details(){
    var options = { 
                url     : '/validateform/personal',
                type    : $("#personal_edit_form").attr('method'),
                dataType: 'json',
                success:function( data ) {
                    var msg = data.msg;
                    if(data.status == 'success'){
                        $("#msg_data").html("Updated successfully, redirecting...")
                        $("#personal_edit_form").submit();
                    }else{
                        $('p[class$="_error2"]').html('');
                        var msg = data.msg;
                        $.each(msg, function(k, v) {
                            $('.'+k+'_error2').html(v);
                        });
                    }
                },
            }; 
            $('#personal_edit_form').ajaxSubmit(options);
                return false;
        }

    $('#updatepersonal').click(function(){
        update_professional_details();
            return false;
    });

Answer 2

Actually i made an alteration to my code to be able to use $.ajax in all other browsers and just made an iframe for the IE browsers like this.

mailer.php

<!--[if IE]>
   <iframe src="form.php"></iframe>
<![endif]-->

<![if !IE]>
<script>
    $(document).ready( function() {
        //Program a custom submit function for the form
        $("#form").submit(function(event){

          //disable the default form submission
          event.preventDefault();

          //grab all form data  
          var formData = new FormData($(this)[0]);

          $.ajax({
            url: $("#form").attr('action'),
            type: 'POST',
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success: function (returndata) {
              alert(returndata);
            }
          });

          return false;
        });
    });
</script>

<?php include_once ('form.php'); ?>

<div id="email-success"></div>
<![endif]>

form.php

<form id="form" action="form-exec.php" target="_self" method="post" enctype="multipart/form-data">
    <input type="text" name="email-to" value="" />
    <input type="text" name="email-subject" value="" />
    <input type="text" name="email-message" value="" />
    <input type="file" name="file" />
    <input type="file" name="file2" />
    <button type="submit" name="email-send">Skicka</button>
</form>

and the form-exec.php is, in my case, my PHPmailer sender!

Answer 3

AFAIK it is possible in IE9+ only. To upload file 'ajax like' you should use iframe trick for that. I used that as source when implementing it:

http://ramui.com/articles/ajax-file-upload-using-iframe.html

Answer 4

Apparently, FormData is not supported in IE. You may, however, be able to use jQuery's serialize like so:

        var FD = $('form').serialize();