web-dev-qa-db-ja.com

jQuery.ajaxでファイルを送信するとTypeErrorが発生する

JQueryのajaxメソッドを使用してフォームからファイルを送信しようとしています：

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

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

これにより、エラーTypeError: 'append' called on an object that does not implement interface FormDataが発生します。

このエラーの原因は何ですか？実際のformdata.appendでは発生せず、jQuery内で発生します。

javascriptjqueryapiform-data
20
user2889070

私は同様のコードで同じ問題を抱えていました。このエラーに関する情報は非常に少ないため、OPは詳しく説明していません。

いくつかのデバッグで、エラーが実際の追加ではなくjqueryの深さでajax呼び出しによってスローされていることに気付きました。 ajaxリクエストにprocessData: false, contentType: falseを追加するのを忘れていたことがわかりました。そうすることで問題が修正されました。

102
Bhau

以下をajaxオブジェクトに追加すると正常に動作します。

contentType: false,
processData: false,

したがって、次のようになります。

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

これらのパラメーターをajaxに追加すると問題が解決します

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