Javascript '；追加'；对未实现接口FormData的对象调用

我正在尝试使用jquery和ajax上传图像。但奇怪的事情发生在这里。在控制台日志中显示它

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

请告诉我我做错了什么

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>

“class=“头像img圆圈img缩略图”alt=“头像”>
上传一张不同的照片。。。

在AJAX中添加这两个参数以解决问题：

processData: false,
contentType: false,

---

为了在jquery中使用formdata，必须设置正确的选项

$.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     
    }
});

processData（默认值：true）

类型：布尔型

默认情况下，传入的数据 将数据选项作为对象（从技术上讲，是除 字符串）将被处理并转换为查询字符串 默认内容类型“application/x-www-form-urlencoded”。如果 如果要发送DOMDocument或其他未处理的数据，请设置 选项为false

---

您必须在ajax调用中设置此参数：

enctype: 'multipart/form-data'

添加：

processData: false,
contentType: false,

这肯定会对文件有帮助，另一方面，如果您正在将错误或成功消息传递回页面，您将希望使用json使您的生活更轻松

例如：

dataType: 'json',

这将有助于解析您的响应。没有它，它将抛出一个错误。

只需编辑您的行：

var postData = new FormData(this);

致：

---

请看第一个相关问题：。我有点困惑。你能帮我吗？假设我想发送一个文件和一个字符串以及一个数组。假设在我的脚本中，我想发送一个图像文件和一个带有用户名的字符串。如何做到这一点？是否可以制作一个json或xml或任何其他数组来保存文件和字符串？我是初学者。也许这是个愚蠢的问题。我需要你的帮助..只需调用FormData对象的append方法来添加项，即：

postData.append（“name”，value）；

注意对于像对象这样的复杂项，即：

{cat:“meow”，dog:“bark”}

，你必须先使用JSON.stringify:

postData.append（“name”，JSON.stringify（someObject））

并解析服务器端的json不要忘记：

缓存：false

它刚才给了我问题。所有问题都解决了。谢谢，我在过去一个小时里一直在讨论这个问题！不要忘记：

缓存：false

它刚才给了我问题。所有问题都解决了。@Zri，jQuery docu的

缓存：false

是什么意思心理状态：缓存（默认值：true，对于数据类型“script”和“jsonp”）类型：Boolean如果设置为false，它将强制浏览器不缓存请求的页面。注意：将缓存设置为false只能正确处理HEAD和GET请求。它通过附加“={timestamp}来工作“以获取参数。对于其他类型的请求，不需要该参数，除非在IE8中，当对GET已请求的URL进行POST时。@Zri您可能正在使用

GET

请求。

cache:false

对于

POST

请求无法正常工作。正如您在上面的评论中提到的，它仅适用于

HEAD

和

GET

请求。而

FormData

用于提交表单数据，表单数据应该是

POST

，而不是

GET

。所以我建议您总是使用POST来提交表单数据。

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