'附加'调用了一个没有实现接口FormData的对象

时间:2014-08-19 18:34:46

标签: javascript jquery ajax

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

  

TypeError:'追加'调用了一个没有实现的对象   接口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 个答案:

答案 0 :(得分:140)

为了在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 reference

  

processData(默认值:true)

     

类型:布尔值

     

默认情况下,传入的数据   作为对象的数据选项(从技术上讲,除了一个以外的任何东西)   string)将被处理并转换为查询字符串,拟合   到默认内容类型“application / x-www-form-urlencoded”。如果   要发送DOMDocument或其他未处理的数据,请设置此项   选项为false。

答案 1 :(得分:27)

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

processData: false,
contentType: false,

答案 2 :(得分:1)

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

for (int r = 0; r < rooms; r++)
    {
        for ( int a = 0; a < apartments; a++)
        {
            for (int f = 0; f < floors; f++)
            {

                cin >> Area[f][a][r];
            }

        }
    }

答案 3 :(得分:0)

添加:

processData: false,
contentType: false,

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

示例:

dataTyte: 'json',

这将有助于解析您的回复。没有它,它将引发错误。

答案 4 :(得分:0)

只需编辑您的行:

source
.compose(skipSingleZero())
.test()
.assertResult(
        0, 0, 0, 0, 0, 0, 0, 5, 5, 6, 7, 8, 8,
        0, 0, 9, 10, 11, 4, 5, 6, 5, 0, 0, 0, 0, 0
);

收件人:

var postData = new FormData(this);