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

Question

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>

Look at the first related question: How to send FormData objects with Ajax-requests in jQuery?. — Felix Kling
– Felix Kling, Commented Aug 19, 2014 at 18:39

Patrick Evans · Accepted Answer · 2014-08-19 18:38:14Z

236

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.

answered Aug 19, 2014 at 18:38

Patrick Evans

42.8k6 gold badges81 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user3682546 Over a year ago

I have a confusion. will you please help me? suppose i want to send a file and a string together with a array. Suppose in my script i want to send the image file and a string with username. how to do that? Is it possible to make a json or xml or any other array to hold file and string together? I am beginner. may be this is the silly question. i need your help..

Patrick Evans Over a year ago

just call the append method of the FormData object to add items, ie: postData.append("name",value);

Patrick Evans Over a year ago

Note for complex items like objects, ie: {cat:"meow",dog:"bark"}, you have to use JSON.stringify first: postData.append("name",JSON.stringify(someObject)); and parse the json on the server end

Zri Over a year ago

Do not forget: cache: false It gave me problems just now. With it all fixed.

CaffeinateOften Over a year ago

But, I want to use multi-part form data? This is changing my content type and now my backend doesn't know how to parse it? :/

|

Cesare · Accepted Answer · 2015-07-06 09:19:28Z

49

Add these two parameters in your AJAX to solve your problem:

processData: false,
contentType: false,

edited Jul 6, 2015 at 9:19

Cesare

9,45516 gold badges82 silver badges136 bronze badges

answered Aug 19, 2014 at 18:38

Sahriar rahman supto

7881 gold badge8 silver badges15 bronze badges

4 Comments

Zri Over a year ago

Do not forget: cache: false It gave me problems just now. With it all fixed.

Fatih Mert Doğancan Over a year ago

@Zri, what is mean of cache: false ?

Zri Over a year ago

From jQuery documentation: cache (default: true, false for dataType 'script' and 'jsonp') Type: Boolean If set to false, it will force requested pages not to be cached by the browser. Note: Setting cache to false will only work correctly with HEAD and GET requests. It works by appending "_={timestamp}" to the GET parameters. The parameter is not needed for other types of requests, except in IE8 when a POST is made to a URL that has already been requested by a GET.

Lucky Over a year ago

@Zri You may be using a GET request. The cache:false won't work properly for POST request. As you mentioned in the above comment, it works only for HEAD and GET requests. And FormData is used to submit a form data which should be a POST instead of GET. So I suggest you always use POST for submitting form data.

modnarrandom · Accepted Answer · 2020-07-06 20:11:02Z

8

Adding:

processData: false,
contentType: false,

will definitely help with the file, an aside to that is if you are doing any sort of passing errors or success messages back to the page, you will want to use json to make your life easier.

example:

dataType: 'json',

this will help with parsing your responses. Without it, it will throw an error.

edited Jul 6, 2020 at 20:11

answered Jul 27, 2019 at 20:09

modnarrandom

1611 silver badge15 bronze badges

Comments

Pang · Accepted Answer · 2016-09-03 07:34:51Z

1

You have to set this parameter in the ajax call:

enctype: 'multipart/form-data'

edited Sep 3, 2016 at 7:34

Pang

10.2k146 gold badges87 silver badges126 bronze badges

answered Sep 3, 2016 at 7:13

Krupal Patel

1,4973 gold badges13 silver badges30 bronze badges

Comments

the_root · Accepted Answer · 2023-07-05 21:43:32Z

0

Or you can try to change:

data : postData,

to

data : postData.entries(),

answered Jul 5, 2023 at 21:43

the_root

3394 silver badges10 bronze badges

Comments

elcortegano · Accepted Answer · 2020-01-22 13:43:56Z

-1

Just edit your line:

var postData = new FormData(this);

to:

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

edited Jan 22, 2020 at 13:43

elcortegano

2,70414 gold badges44 silver badges65 bronze badges

answered Jan 22, 2020 at 12:45

e sadeghi

431 silver badge4 bronze badges

Collectives™ on Stack Overflow

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

6 Answers 6

6 Comments

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

6 Comments

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related