'append' called on an object that does not implement interface FormData
JavascriptJqueryAjaxJavascript Problem Overview
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>
Javascript Solutions
Solution 1 - Javascript
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
}
});
> 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.
Solution 2 - Javascript
Add these two parameters in your AJAX to solve your problem:
processData: false,
contentType: false,
Solution 3 - Javascript
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.
Solution 4 - Javascript
You have to set this parameter in the ajax call:
enctype: 'multipart/form-data'
Solution 5 - Javascript
Just edit your line:
var postData = new FormData(this);
to:
var postData = new FormData($(this));