“追加”叫不实现接口的对象上FORMDATA [英] 'append' called on an object that does not implement interface FormData

问题描述

我想上传图像与jQuery和Ajax。但在这里奇怪的事情发生了。在控制台登录其表现

  

类型错误：'追加'在对象上调用一个没有实现   接口FORMDATA。

请告诉我，我做错了什么吗？

JS脚本

。

  VAR prosrc = $（＃pro_pix IMG）去年（）ATTR（SRC）;
$（＃logoform）。在（'改变'，函数（事件）{
VAR POSTDATA =新FORMDATA（本）;
$（＃pro_pix IMG）去年（）隐藏（）。
。$（＃pro_pix IMG）第一（）显示（）;
。事件preventDefault（）;
$阿贾克斯（
    {
        网址：/function/pro_pic_upload.php
        键入：POST，
        数据：POSTDATA，
        成功：功能（数据，textStatus，jqXHR）
        {
        $（＃pro_pix IMG）去年（）显示（）。
        。$（＃pro_pix IMG）第一（）隐藏（）;
        $（＃pro_pix H6）文本（数据）。
        }，
        错误：函数（jqXHR，textStatus，errorThrown）
        {
            //如果失败
        }
    }）;
}）;
 

我的HTML标记

 ＆LT; D​​IV CLASS =行＆GT;
    ＆LT;！ - 左边的列 - ＆GT;
    ＆LT; D​​IV ID =pro_pix级=COL-MD-4 COL-SM-6 COL-XS-12＆GT;
      ＆LT; D​​IV CLASS =文本中心＆GT;
        ＆LT; IMG SRC =模板/图像/ 725.GIF级=阿凡达IMG圈IMG缩略图的风格=显示：无ALT =阿凡达＆GT;
        ＆LT; IMG SRC =＆LT; PHP的echo $ rowuser ['profile_logo'];？＆gt;中类=阿凡达IMG圈IMG缩略图ALT =阿凡达＆GT;
        ＆LT; H6＆GT;上传一张不同的照片...＆LT; / H6＆GT;
        ＆LT;形式的作用=形式ID =logoformENCTYPE =的multipart / form-data的＆GT;
        ＆LT;输入ID =标志NAME =标志类型=文件级=文本中心的中心块以及良好SM＆GT;
        ＆LT; /形式GT;
      ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
 

解决方案

为了使用FORMDATA与jQuery你必须设置正确的选项

  $。阿贾克斯（{
    网址：/function/pro_pic_upload.php
    键入：POST，
    数据：POSTDATA，
    过程数据：假的，
    的contentType：假的，
    成功：功能（数据，textStatus，jqXHR）{
        $（＃pro_pix IMG）去年（）显示（）。
        。$（＃pro_pix IMG）第一（）隐藏（）;
        $（＃pro_pix H6）文本（数据）。
    }，
    错误：函数（jqXHR，textStatus，errorThrown）{
        //如果失败
    }
}）;
 

阿贾克斯

参考

  

过程数据（默认：true）

     

类型：布尔

     

默认情况下，通过数据   对数据的选择，因为一个对象（从技术上讲，以外的任何其他   串）将被处理并转换成一个查询串，拟合   为默认的内容类型应用程序/ x-WWW的形式urlen codeD。如果   要发送一个DOMDocument，或其他非处理的数据，设置该   选项​​设置为false。

I'm Trying to upload image on with jquery and ajax. But weird thing happened here. In console Log its showing

TypeError: 'append' called on an object that does not implement interface FormData.

Please tell me what i did wrong here?

JS script

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

My HTML Markup

 <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>

解决方案

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.

这篇关于“追加”叫不实现接口的对象上FORMDATA的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！