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

我在使用类似的代码时遇到了同样的问题。关于此错误的信息严重缺乏，因此由于 OP 没有详细说明：

通过一些调试，我意识到错误是由 jquery 深处的 ajax 调用引发的，而不是实际的附加。原来我忘记添加processData: false, contentType: false到 ajax 请求；这样做可以解决问题。

Answer 2

当您将以下内容添加到 ajax 对象时，它可以正常工作：

contentType: false,
processData: false,

所以它应该看起来像：

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

Answer 3

将这些参数添加到ajax解决问题

$.ajax({
      url: 'upload_ajax.php',
       type: 'POST',
       data: formData,
       contentType: false,
       processData: false,