Ajax form submit with file upload using jquery

Question

I'm trying to submit a form with one text- and one file upload field by ajax using jQuery.

$("#myForm").submit(function() { var formData = new FormData($(this)[0]); $.ajax({ url: $(this).attr("action"), type: "POST", data: formData, async: false, cache: false, contentType: false, proccessData: false, success: function() { // do something smart here } }); }); 

On submit, i only got a error Illegal operation on WrappedNative prototype object, because the ajax request is trying to send the whole DOM from the form.

How do i send the data correctly?

$(this).serialize() would be the option, if i only want to send text, but i'm trying to send text AND upload a file at the same time.

Thanks for your help!

Answer 1

Try this one,

$("#pushform").submit(function(){ var formData = new FormData($(this)[0]); $.ajax({ url:$(this).attr("action"), type: 'POST', data: formData, async: false, success: function (data) { alert(data); location.reload(); }, cache: false, contentType: false, processData: false }); return false; 

Answer 2

the issue is just a typo:

proccessData: false, # should be processData: false,

Fix that, and your form with text + file upload via AJAX should work perfectly. 😊