在未实现接口 FormData 的对象上调用“附加”

IT技术 javascript jquery ajax
2021-03-17 15:26:21

我正在尝试使用 jquery 和 ajax 上传图像。但是这里发生了奇怪的事情。在控制台记录其显示

类型错误：在未实现接口 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>
5个回答

为了在 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     
    }
});

.ajax 参考

processData（默认值：true）

类型：布尔型

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

我有一个困惑。你能帮我吗？假设我想发送一个文件和一个字符串以及一个数组。假设在我的脚本中我想发送图像文件和一个带有用户名的字符串。怎么做？是否可以制作一个 json 或 xml 或任何其他数组来保存文件和字符串？我是初学者。可能这是个愚蠢的问题。我需要你的帮助..
2021-04-28 15:26:21
不要忘记： cache: false 它刚刚给我带来了问题。一切都解决了。
2021-05-01 15:26:21
注意像对象这样的复杂项目，即：{cat:"meow",dog:"bark"}，你必须先使用 JSON.stringify:postData.append("name",JSON.stringify(someObject));并在服务器端解析 json
2021-05-08 15:26:21
只需调用 FormData 对象的 append 方法来添加项目，即： postData.append("name",value);
2021-05-10 15:26:21
谢谢，过去一个小时我一直在解决这个问题！
2021-05-20 15:26:21

在你的 AJAX 中添加这两个参数来解决你的问题：

processData: false,
contentType: false,
@Zri，是什么意思cache: false？
2021-04-22 15:26:21
来自 jQuery 文档：缓存（对于 dataType 'script' 和 'jsonp'，默认值：true，false） 类型：Boolean 如果设置为 false，它将强制浏览器不缓存请求的页面。注意：将缓存设置为 false 仅适用于 HEAD 和 GET 请求。它的工作原理是将“_={timestamp}”附加到 GET 参数。其他类型的请求不需要该参数，除非在 IE8 中对已由 GET 请求的 URL 进行 POST。
2021-04-28 15:26:21
不要忘记：cache: false它刚刚给我带来了问题。一切都解决了。
2021-05-12 15:26:21
@Zri 您可能正在使用GET请求。该cache:false用于将无法正常工作POST的要求。正如您在上述评论中提到的，它仅适用于HEAD和GET请求。并且FormData用于提交一个表单数据，它应该是一个POST而不是GET. 所以我建议你总是使用 POST 提交表单数据。
2021-05-12 15:26:21

添加：

processData: false,
contentType: false,

肯定会对文件有所帮助，除此之外，如果您正在将任何类型的错误或成功消息传递回页面，您将希望使用 json 使您的生活更轻松。

例子：

dataType: 'json',

这将有助于解析您的回复。没有它，它会抛出一个错误。

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

enctype: 'multipart/form-data'

只需编辑您的行： 

var postData = new FormData(this);

到：

var postData = new FormData($(this));
其它你可能感兴趣的问题
上一篇react-router (v4) 怎么回去？ 下一篇来自 Google Adsense 的 Javascript 错误