对未实现接口 FormData 的对象调用“ append”

我试图用 jquery 和 ajax 上传图片。但是奇怪的事情发生了。在控制台记录它的显示

TypeError: 对未实现的对象调用“ append” 接口表单数据。

请告诉我我做错了什么？

JS 剧本

var prosrc=$("#pro_pix img").last().attr("src");
$("#logoform").on('change',function(event){
var postData = new FormData(this);
$("#pro_pix img").last().hide();
$("#pro_pix img").first().show();
event.preventDefault();
$.ajax(
{
url : "/function/pro_pic_upload.php",
type: "POST",
data : postData,
success:function(data, textStatus, jqXHR)
{
$("#pro_pix img").last().show();
$("#pro_pix img").first().hide();
$("#pro_pix h6").text(data);
},
error: function(jqXHR, textStatus, errorThrown)
{
//if fails
}
});
});

我的 HTML 标记

 <div class="row">
<!-- left column -->
<div id="pro_pix" class="col-md-4 col-sm-6 col-xs-12">
<div class="text-center">
<img src="template/image/725.GIF" class="avatar img-circle img-thumbnail" style="display:none" alt="avatar">
<img src="<?php echo $rowuser['profile_logo']; ?>" class="avatar img-circle img-thumbnail" alt="avatar">
<h6>Upload a different photo...</h6>
<form role="form" id="logoform" enctype="multipart/form-data">
<input id="logo" name="logo" type="file" class="text-center center-block well well-sm">
</form>
</div>
</div>

107757

小开

Add these two parameters in your AJAX to solve your problem:

processData: false,
contentType: false,

小开

最佳答案

in order to use formdata with jquery you have to set the correct options

$.ajax({
url : "/function/pro_pic_upload.php",
type: "POST",
data : postData,
processData: false,
contentType: false,
success:function(data, textStatus, jqXHR){
$("#pro_pix img").last().show();
$("#pro_pix img").first().hide();
$("#pro_pix h6").text(data);
},
error: function(jqXHR, textStatus, errorThrown){
//if fails
}
});

.ajax reference

processData (default: true)

Type: Boolean

By default, data passed in to the data option as an object (technically, anything other than a string) will be processed and transformed into a query string, fitting to the default content-type "application/x-www-form-urlencoded". If you want to send a DOMDocument, or other non-processed data, set this option to false.

小开

You have to set this parameter in the ajax call:

enctype: 'multipart/form-data'

小开

Adding:

processData: false,
contentType: false,

will definitely help with the file, an aside to that is if you are doing any sort of passing errors or success messages back to the page, you will want to use json to make your life easier.

example:

dataType: 'json',

this will help with parsing your responses. Without it, it will throw an error.

小开

Just edit your line:

var postData = new FormData(this);

to:

var postData = new FormData($(this));