JQuery: 'Uncaught TypeError: Illegal invocation' at ajax request

Question

I am using this AJAX function to post my form to a specific URL .It is getting to the required URL and processing but when it it return the result it is giving error.

<script type="text/javascript">
    //var formm = "";
    $("#UploadnForm").bind("submit", function () {
         $('#UploadnForm input[type="submit"]').attr('disabled', true);
        form = $(this);
        $.ajax({
            type: "POST",
            cache: false,
            url: $(this).attr('action'),
            enctype: 'multipart/form-data',
            data: new FormData(this),
             success: function (data) {
                alert("helo");
                if (data.success == true) {
                    alert("The image is Uploaded");
                }
            },
            error: function () {
                alert(data.error);
            }

        });
       

    });
</script>
       
        
 

But I am getting error:

illegal invocation

while I return the result.

Answer 1

I think the problem is with the data part of your ajax. serialize the form before send

$.ajax({
    type: "POST",
    cache: false,
    url: $(this).attr('action'),
    enctype: 'multipart/form-data',
    data: $(this).serialize(),
    success: function (data) {
        alert("helo");
        if (data.success == true) {
            alert("The image is Uploaded");
        }
    },
    error: function () {
        alert(data.error);
    }

});

Edit

$.ajax({
    type: "POST",
    cache: false,
    url: $(this).attr('action'),
    enctype: 'multipart/form-data',
    data: new FormData(this),
    processData: false,
    contentType: false,
    success: function (data) {
        alert("helo");
        if (data.success == true) {
            alert("The image is Uploaded");
        }
    },
    error: function () {
        alert(data.error);
    }

});