javascript - Submitting a file with jQuery.ajax gives TypeError

Question

I am trying to submit a file from a form using jQuery's ajax method:

var ofile=document.getElementById('image').files[0];
var formdata = new FormData();
formdata.append("image",ofile);

$.ajax({
    url:'elements/save_elements',
    data:formdata,
    type:'POST'
});

This results in the error TypeError: 'append' called on an object that does not implement interface FormData.

What causes this error? It doesn't happen on the actual formdata.append, but inside jQuery.

Answer 1

I was having the same problem with similar code. There's a severe dearth of information about this error, so since the OP didn't elaborate:

With some debugging I realised the error was being thrown by the ajax call in the depths of jquery, not the actual append. Turns out I'd forgotten to add processData: false, contentType: false to the ajax request; Doing so fixed the problem.