data not retrieve through formdata - php

Question

I am trying to save image using ajax .and passing data through Formdata()
but at php file i can not retrieve data or image name please help me
here is my code
<form name='signup' id='signup'>
<div class="row">
<!--<form id="uploadimage" action="" method="post" enctype="multipart/form-data">-->
<div id="selectImage">
<label>Select Image</label>
<div id="image_preview">
<img id="previewing" src="uploaded_files/259700.png" height="150" width="150" />
</div>
<input type="file" name="file" id="file" required />
<!--<input type="submit" value="Upload" class="submit" />-->
</div>
<!--</form>-->
</div>
<div class='row'>
<p>
<label for='username'>First name</label>
<input type='text' name='firstname' id='firstname' value='' placeholder='Enter First name' />
</p>
</div>
<div class='row'>
<p>
<label for='lastname'>Last name</label>
<input type='text' name='lastname' id='lastname' value='' placeholder='Enter Last name' />
</p>
</div>
<div class='row'>
<p>
<label for='email'>Email</label>
<input type='text' name='email' id='email' value='' placeholder='Enter Email' />
</p>
</div>
<div class='row'>
<p>
<label for='phno'>Phno.</label>
<input type='text' name='phno' id='phno' maxlength="10" value='' placeholder='Enter ph no' />
</p>
</div>
<!--<input type="hidden" name="actionfunction" value="saveData" />-->
<input type="hidden" name="actionfunction" value="saveData" />
<div class='row'>
<input type='button' id='formsubmit' class='submit' value='Submit' />
<!--<input type='submit' id='formsubmit' class='submit' value='Submit' />-->
</div>
</form>
here is my ajax script code:
$("#signup").on('submit', (function() {
var fname = $("#firstname");
var lname = $("#lastname");
var email = $("#email");
var phno = $("#phno");
if (validateform(fname, lname, email, phno)) {
var formdata = new FormData(this);
$.ajax({
url: "DbManipute.php",
type: "POST",
data: formdata,
processdata: false,
cache: false,
contentType: false,
success: function(response) {
//alert(response);
if (response == 'added') {
$("#show_user").trigger("click");
getusers();
$("#msg").html("user added");
}
},
});
}
});
And here is my "DbManipute.php" code:
function saveData($data,$con){
$imgfile=$_FILES['file']['name'];
$fname = $data['firstname'];
$lname = $data['lastname'];
$email = $data['email'];
$phno = $data['phno'];
//$fname = $_POST['firstname'];
//$lname = $_POST['lastname'];
//$email = $_POST['email'];
//$phno = $_POST['phno'];
$sql = "insert into tbl_employees(emp_name,emp_lname,emp_email,emp_phno,emp_pic) values('$fname','$lname','$email','$phno','$imgfile')";
if($con->query($sql)){
echo "added";
} else {
echo "error";
}
}
i didn't get any error and data also not inserted.
when i remove image upload and use serialize method then data is saved successfully but in serialize method image file name can not retrieve
please help me regarding this.

Answer 1

You need to append the type="file" separately.
$("#signup").on('submit', (function() {
var fname = $("#firstname");
var lname = $("#lastname");
var email = $("#email");
var phno = $("#phno");
if (validateform(fname, lname, email, phno)) {
var formdata = new FormData(this);
formdata.append( 'file', $("input[name='file']")[0].files[0] );
$.ajax({
url: "DbManipute.php",
type: "POST",
data: formdata,
processdata: false,
cache: false,
contentType: false,
success: function(response) {
//alert(response);
if (response == 'added') {
$("#show_user").trigger("click");
getusers();
$("#msg").html("user added");
}
},
});
}
});

Answer 2

Your client side error will not be shown in the page just like php.
You have some errors in your javascript code. You have missed an closing parenthesis at the end of js code: });
If you are using chrome or firefox browser, press F12 button and console will be shown and will show you your js errors.
Tip: you can debug your project by printing any variables in your code. For example try to use console.log('test'); in your js code to check if your ajax command is working. console.log() will print in console box of browser.
When i did this in your code i understood that your code is not running at all. Because you have set your code to be run on submit and you do not have any submit button. Then you need to change your button's type="submit".
After that you need to prevent form by submitting the form using browser and tell browser that you want to run your js code. For that you need need to prevent default action for form submit event like this:
$("#signup").on('submit', (function(evt) {
evt.preventDefault();
Another tip is that your php code is in a function that is never called. you need to call your php function in your php file or you should put your codes out of function.
Try changing your code like this. This should make your code work. And to check if your ajax request is working try to echo something in your code and in your js code alert the response.
Edit#1 One more thing to consider is that for cases that you want to upload files using ajax, you can not set data like FormData(this). For ajax uploading purpose you should create object of FormData (new FormData()) and append the data separately. (as Rejith R Krishnan said).