Ajax multipart/form-data method gives error - php

Question

Am getting a error while uploading multipart/form-data form, i have two input getting one image and pdf.
here is html code
<form class="form-group" id="form-add" >
<input name="title" size="30" class="form-control margin-bottom-25" id="title" placeholder="Enter Title" spellcheck="true" autocomplete="off" type="text" />
<input name="code" size="30" class="form-control margin-bottom-25" id="code" placeholder="Enter Course Code" spellcheck="true" autocomplete="off" type="text" />
<div class="wp-media-buttons"><input type="file" id="image_select" name="image" class="form-control margin-bottom-50" ></div>
<div class="wp-media-buttons"><input type="file" name="pdf" id="pdf_select" class="form-control margin-bottom-50" ></div>
<div class="col-md-6"><input type="text" id="batch" name="batch" class="form-control margin-bottom-25" placeholder="Enter Batch Size" /></div>
<div class="margin-bottom-25 col-md-6"><select id="batch-dec" name="batch-dec" class="form-control margin-bottom-25">
<option >Select</option>
<option value="Batch Size">Batch Size</option>
<option value="Field Work">Field Work</option>
<option value="Project">Project</option>
</select></div>
<div class=" col-md-6">
<input type="text" id="duration" name="duration" class="form-control margin-bottom-25" spellcheck="true" placeholder="Enter Duration"/></div>
<div class="col-md-6">
<select id="duration-dec" name="duration-dec-dec" class="form-control margin-bottom-25">
<option >Select</option>
<option value="Time Duration">Time Duration</option>
<option value="Class Room">Field Work</option>
</select>
</div>
<div class="clearfix"></div>
<div class="margin-bottom-25">Add Course Description Below</div>
<div id="editor-container" class="editor-container margin-bottom-25" style="position:relative">
<textarea spellcheck="true" class="editor-area form-control margin-bottom-25" style="height: 326px; margin-top: 37px;" cols="40" name="content" id="content" aria-hidden="false"></textarea>
</div>
<input class="btn btn-primary publish" type="submit" name="submit" id="publish" value="Publish" />
</form>
Ajax code
$(document).ready(function(){
$(document).on('click', '#publish', function(){
/*var code = $('#code').val();
var title= $('#title').val();
var image= $('#image_select').files[0];
var pdf= $('#pdf_select').files[0];
var batch = $('#batch').val();
var batch_dec = $('#batch-dec').val();
var duration = $('#duration').val();
var duration_dec = $('#duration-dec').val();
var content = $('#content').val();
if($(document).on('click','#draft')){
var status = $('#draft').val();
}
else if(($(document).on('click','#publish'))){
var status =$('#publish').val();
}
var status =$('#publish').val();
var formdata = new FormData();
formdata.append('code',code);
formdata.append('title',title);
formdata.append('image',image);
formdata.append('pdf',pdf);
formdata.append('batch',batch);
formdata.append('batch_dec',batch_dec);
formdata.append('duration',duration);
formdata.append('duration_dec',duration_dec);
formdata.append('content',content);
formdata.append('status',status);*/
//alert(formdata);
var formdata = new FormData($('#form-add')[0]);
formdata.append('image',$('#image_select')[0].files[0] );
formdata.append('pdf',$('#pdf_select')[0].files[0]);
$.ajax({
url:"include/courses-add.php",
// method:"POST",
type:'post',
enctype:'multipart/form-data',
data:formdata,
contentType:false,
cache:false,
processData: false,
success:function(data){
alert(data);
$('#result').html("<div class='alert alert-success'>"+data+"</div>");
} ,
error:function(e)
{
console.log('error:',e);
}
});
});
});
I Used same method separately adding files and other data it working fine, but i need to post both data in same form. get a console.log like
Error:
Object { readyState: 0, getResponseHeader: getResponseHeader(), getAllResponseHeaders: getAllResponseHeaders(), setRequestHeader: setRequestHeader(), overrideMimeType: overrideMimeType(), statusCode: statusCode(), abort: abort(), state: state(), always: always(), then: then(), … }
Can seen in JavaScript tried many code still it giving error, post just submitting but
ajax block is not working, it's throwing an error in console.

Answer 1

Use ajaxSubmit that is easy:
https://github.com/claviska/jquery-ajaxSubmit
$('#postreportform').on('submit', function (e) {
var postreportform = $(this);
e.preventDefault();
$(this).ajaxSubmit(
{
success: function (data) {
.....
},
error: function (jqXhr) {
.....
}
});
});

Answer 2

$("#form-add").on('submit', (function(e) {
e.preventDefault();
var code = $('#code').val();
var title= $('#title').val();
var image= $('#image_select').files[0];
var pdf= $('#pdf_select').files[0];
var batch = $('#batch').val();
var batch_dec = $('#batch-dec').val();
var duration = $('#duration').val();
var duration_dec = $('#duration-dec').val();
var content = $('#content').val();
var status =$('#publish').val();
var formdata = new FormData(this);
formdata.append('code',code);
formdata.append('title',title);
formdata.append('image',image);
formdata.append('pdf',pdf);
formdata.append('batch',batch);
formdata.append('batch_dec',batch_dec);
formdata.append('duration',duration);
formdata.append('duration_dec',duration_dec);
formdata.append('content',content);
formdata.append('status',status);
$.ajax({
url:"include/courses-add.php",
// method:"POST",
type:'post',
enctype:'multipart/form-data',
data:formdata,
contentType:false,
cache:false,
processData: false,
success:function(data){
alert(data);
$('#result').html("<div class='alert alert-success'>"+data+"</div>");
} ,
error:function(e)
{
console.log('error:',e);
}
});
}));