'append' calls an object that does not implement the FormData interface

Question

I am trying to upload an image using jquery and ajax. But here a strange thing happened. In the console, record its display

TypeError: 'append' raises an object that does not implement the FormData interface.

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> 

Answer 1

to use formdata with jquery you have to set the correct parameters

 $.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, the data transferred to the data parameter as an object (technically, nothing but a string) is processed and converted to a query string, setting the application / x-www-form-urlencoded to the standard content type. If you want to send DOMDocument or other untreated data, set this parameter to false.

Answer 2

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

 processData: false, contentType: false, 

Answer 3

You must set this parameter in an ajax call:

 enctype: 'multipart/form-data' 

Answer 4

Addendum:

 processData: false, contentType: false, 

will definitely help with the file, in addition, if you make any error messages or success messages back to the page, you will want to use json to make your life easier.

Example:

 dataTyte: 'json', 

this will help with the analysis of your answers. Without this, he will throw an error.