我正在尝试使用jquery和ajax上传图像。但是奇怪的事情在这里发生了。在控制台中记录其显示
TypeError:在未实现接口FormData的对象上调用了“ 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>
为了将formdata与jquery一起使用,您必须设置正确的选项
$.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参考
processData(默认值:true) 类型:布尔 默认情况下,作为对象传递给data选项的数据(从技术上讲,不是字符串)将被处理并转换为查询字符串,以适合默认的内容类型“ application / x-www-form-urlencoded” 。如果要发送DOMDocument或其他未处理的数据,请将此选项设置为false。
processData(默认值:true)
类型:布尔
默认情况下,作为对象传递给data选项的数据(从技术上讲,不是字符串)将被处理并转换为查询字符串,以适合默认的内容类型“ application / x-www-form-urlencoded” 。如果要发送DOMDocument或其他未处理的数据,请将此选项设置为false。