Sending image along other data in ajax to php - php

Question

I need little help. I created ajax form and pass the data to the api.php. I have no problem sending normal value to the php. I currently facing problem on sending file through.
HTML
<form id="adding" enctype="multipart/form-data">
<input type="file" id="imgInp">
<input type="text" id="name">
<button type="submit" class="btn btn-default pull-right">Submit</button>
</form>
Javascript
$('#adding').submit(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: 'api.php?do=add',
data: {
img: $("#imgInp").val(),
name: $("#name").val()
},
success: function(data)
{
if (data === 'KO'){
document.getElementById("error").innerHTML = "Alert";
}
if (data === 'OK'){
document.getElementById("error").innerHTML = "OK";
}
}
});
Data from variable name can be send but not from img. Please help. Thank you

Answer 1

Sounds to me like you need to use the form data object. In the data attribute, via your ajax call,
FYI: you need to have jquery libraries to get this working
This would grab all form contents and then you can receive theform contents including the image on your php controller
$('#adding').submit(function(e) {
var formData = new FormData($(this));
e.preventDefault();
$.ajax({
type: "POST",
url: 'api.php?do=add',
data: formData ,
contentType: false,
processData: false,
cache: false,
success: function(data)
{
if (data === 'KO'){
document.getElementById("error").innerHTML = "Alert";
}
if (data === 'OK'){
document.getElementById("error").innerHTML = "OK";
}
}
});
On your php side,
<?php
try{
if(isset($_FILES) && $_FILES['tmp_name'] != null){
//awesome, we have something here
//then check for extensions, validate and move upload
}else{
//no file
}
}catch(Exception $ex){
echo($ex->getMessage());
}
?>