Ajax showing Success without submitting the data in internet explorer

Question

My ajax code is

$("#form1").submit(function(e){
                    var formData = new FormData($(this)[0]);
                    var ProPicProgressInterval = null;
                    $.ajax({
                        url: 'uploader.php',
                        type: 'POST',
                        data: formData,
                        cache: false,
                        contentType: false,
                        processData: false,
                        beforeSend: function(){
                            ProPicProgressInterval = setInterval(function(){
                                $.get("progress.php?progress_key=<?php echo $up_id; ?>", function(data){
                                        $("#progressInp").val(Math.round(data)+"%");
                                    }
                                )},
                                3000
                            );
                        },
                        success: function(result){
                            clearInterval(ProPicProgressInterval);
                            alert(result);
                        }
                    });

                });

And my HTML form is

<form id="form1" action="" method="POST" onsubmit="return false;">
            Choose a file to upload<br />

            <!--APC hidden field-->
            <input type="hidden" name="APC_UPLOAD_PROGRESS" id="progress_key" value="<?php echo $up_id; ?>"/>

            <input name="photo" type="file" /><br />
            <input type="text" id="progressInp" value="0%"/><br />

            <input name="Submit" type="submit" id="submit" value="Submit" />
        </form>

This works fine in all browsers except IE 10. In internet explorer, when we attach file and click submit, this alerts result message in success function without file transfer. I guess it because, formData is empty. What would be the problem?

Answer 1

Your issue may be because IE10 is operating in Quirks mode. This seems to happen randomly if you don't explicitly tell it to use the latest Rendering engine.

Add this tag to your and make sure it is the FIRST tag in the block.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

This will make IE run in the latest Rendering engine.

Also, make sure that compatibility mode is not interfering with anything.