Uploading files and inserting data using ajax
My problem is that when I post data to mysql database without file upload, it is inserted into the database successfully, but when im using insert data along with file upload, it fails and no data received by post file .js,
success:function(data)
{
alert(data);
}
post.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AdPortal</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="header">
</div>
<div class="nav">
<ul class="nav_link">
<div class="nav_link_div"><a href="http://localhost/adportal/index.html"><li class="nav_link_list">HOME</li></a></div>
<div class="nav_link_div"><a href="#"><li class="nav_link_list">POST AD</li></a></div>
<div class="nav_link_div"><a href="#"><li class="nav_link_list">CONTACT US</li></a></div>
<div class="nav_link_div"><a href="#"><li class="nav_link_list">ABOUT</li></a></div>
</ul>
</div>
<div class="post_table">
<form method="post" enctype="multipart/form-data">
<table>
<tr>
<td>
Ad Title of Post:
</td>
<td>
<input type="text" id="ad_title">
</td>
</tr>
<tr>
<td>
Price:
</td>
<td>
<input type="text" id="price">
</td>
</tr>
<tr>
<td>
Model:
</td>
<td>
<input type="text" id="model">
</td>
</tr>
<!-- <td>
<input type="button" id="upload" value="Upload" />
</td> -->
</tr>
<tr>
<td>
Ad description:
</td>
<td>
<textarea rows="5" cols="21" id="description"></textarea>
</td>
</tr>
<tr>
<td>
Name:
</td>
<td>
<input type="text" id="name">
</td>
</tr>
<tr>
<td>
Email:
</td>
<td>
<input type="text" id="email">
</td>
</tr>
<tr>
<td>
Phone:
</td>
<td>
<input type="text" id="phone">
</td>
</tr>
<tr/>
<td>
City:
</td>
<td>
<input type="text" id="city">
</td>
</tr>
<tr>
<td>Add Image</td>
<td>
<input id="file" type="file" />
</td>
<tr>
<td></td>
<td>
<button type="submit" id="ad_btn">Submit Post</button>
</td>
</tr>
</table>
</form>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/post.js"></script>
</body>
</html>
post.js
$(document).ready(function(){
$("#ad_btn").on('click', function(){
var title = $("#ad_title").val();
var price = $("#price").val();
var model = $("#model").val();
var description = $("#description").val();
var name = $("#name").val();
var email = $("#email").val();
var phone= $("#phone").val();
var city= $("#city").val();
var file_data = $('#file').prop('files')[0];
var form_data = new FormData();
form_data.append('file', file_data);
$.ajax({
url:'php/post.php',
type:'POST',
data:form_data,
success:function(data)
{
alert(data);
}
});
});
});
post.php
<?php
require_once 'database.php';
move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']);
if (0 < $_FILES['file']['error']) {
echo 'Error: ' . $_FILES['file']['error'] . '<br>';
} else {
}
echo "done";
$id = NULL;
$title = $_POST['title'];
$price = $_POST['price'];
$model = $_POST['model'];
$description = $_POST['description'];
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$city = $_POST['city'];
$stmt = $dbh->prepare("INSERT INTO posts VALUES (?,?,?,?,?,?,?,?,?)");
$stmt->execute(array($id,$title, $price, $model, $description, $name, $email, $phone, $city));
+3
source to share
1 answer
Try:
$(document).ready(function(){
$("#ad_btn").on('click', function(){
var title = $("#ad_title").val();
var price = $("#price").val();
var model = $("#model").val();
var description = $("#description").val();
var name = $("#name").val();
var email = $("#email").val();
var phone= $("#phone").val();
var city= $("#city").val();
var file_data = $('#file').prop('files')[0];
var form_data = new FormData();
form_data.append('file', file_data);
$.ajax({
url:'php/post.php',
type:'POST',
data: {"title":title,"price":price,"model":model,"description":description,"name":name,"email":email,"phone":phone,"city":city,"form_data",form_data},
success:function(data)
{
alert(data);
}
});
});
});
0
source to share