File submission using ajax and jquery not working - php

Question

I have to submit the form using ajax. The form contain a text field and a file upload field.But in ajax page(formaction.php) the the file details are not getting.
HTML
<form method="post" id="newform" enctype="multipart/form-data">
Name:<input type="text" id="txt" name="txt"><br>
File:<input type="file" id="image" name="image"><br>
<input type="submit" id="btn" value='Proceed'>
</form>
jQuery
$(document).ready(function(){
$("#btn").click(function(event){
event.preventDefault();
var formdata = $('form#newform').serialize();
$.post("formaction.php",{formdata:formdata},function(data){
alert(data);
});
});
});
formaction.php
print_r($_REQUEST['formdata']);
input type file details are not getting in ajax page. The formdata only contain the value of text field.

Answer 1

your jquery must be change same as this:
<script type="text/javascript">
function submitForm() {
console.log("submit event");
var fd = new FormData(document.getElementById("fileinfo"));
fd.append("label", "WEBUPLOAD");
$.ajax({
url: "formaction.php",
type: "POST",
data: fd,
enctype: 'multipart/form-data',
processData: false, // tell jQuery not to process the data
contentType: false // tell jQuery not to set contentType
}).done(function( data ) {
console.log("PHP Output:");
console.log( data );
});
return false;
}
</script>

Answer 2

To get file details,
instead of this,
print_r($_REQUEST['formdata']);
add this
print_r($_FILES['image']);

Answer 3

The serialize() won't include the file input in the form data. You have to do it manually.
$("#btn").click(function(event) {
event.preventDefault();
var form_data = new FormData(document.getElementById('newform'));
// Now you have your DataObject setup.
$.ajax({
url: 'formaction.php',
type: 'POST',
cache : false,
contentType: false, // Important.
processData: false, // Important.
data: form_data
})
.done(function(data) {
console.log(data);
})
.fail(function(data) {
console.log(data);
});
return false;
});
Using $.ajax() you can achieve this very easily.
Now in formaction.php: You can pick up the values like normal form submission.
$txt = $_POST['txt'];
$image = $_FILES['image'];
Note: Do keep in mind those contentType: false and processData: false
If you don't give processData: false then ajax will return an error in the console "Illegal invocation."
If you don't give contentType: false then the file will be submitted in encoded and raw with content-disposition and content-type: 'application/pdf' or whatever mime type you are uploading.