image upload using jquery ajax php mysqli - php

Question

using ajax to upload image url in database but i got error when submit form. I want upload image url im database without page refresh. Error is GET https://api.ciuvo.com/api/analyze?url=http%3A%2F%2Flocalhost%2F&version=2.1.3&tag=threesixty&uuid=C473346A-075C-48CD-A961-F4B68EFE2C4F 400 (Bad Request)
**html code**
<form id="form" enctype="multipart/form-data">
<label>Image:</label>
<input type="file" name="txtimg">
<input type="submit" value="INSERT IMAGE" name="btnimage">
</form>
<div id="message"></div>
**ajax request**
<script type="text/javascript">
$(document).ready(function (e) {
$("#form").on('submit',(function(e) {
e.preventDefault();
$.ajax({
url: "upload.php",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
success: function(data)
{
$("#message").html(data);
}
});
}));
});
php code
<?php
$host="localhost";
$user="root";
$pass="";
$db="test";
$con=mysqli_connect($host,$user,$pass);
mysqli_select_db($con,$db);
if (isset($_FILES["file"]["type"])) {
$dir = "images/";
$imagelocation=$dir.basename($_FILES['txtimg']['name']);
$extension = pathinfo($imagelocation,PATHINFO_EXTENSION);
if($extension != 'jpg' && $extension != 'png' && $extension != 'jpeg')
{
echo"plzz upload only jpg,jpeg And png";
}
else
{
if(move_uploaded_file($_FILES['txtimg']['tmp_name'],$imagelocation) )
{
if(mysqli_query($con,"Insert into img (img_url) values($imagelocation')"))
{
echo"SUCCESSFULLY";
}
}
else {
echo"ERROR";
}
}
}
?>

Answer 1

You should not call FormData object inside ajax request,
html code
<form id="form" enctype="multipart/form-data">
<label>Image:</label>
<input type="file" name="txtimg">
<input type="submit" value="INSERT IMAGE" name="btnimage">
</form>
<div id="message"></div>
**ajax request**
<script type="text/javascript">
$(document).ready(function (e) {
$("#form").on('submit',(function(e) {
e.preventDefault();
var fdata = new FormData(this);
$.ajax({
url: "upload.php",
type: "POST",
data: fdata,
contentType: false,
cache: false,
processData:false,
success: function(data)
{
$("#message").html(data);
}
});
}));
});