jQuery ajax image file upload in PHP; In this example tutorial, you will learn how to upload image file using jQuery ajax in PHP with MySQL database without refresh the whole web page.
How to Upload Image using jQuery Ajax in PHP MySQL
By using the following steps, you can upload an image file using jQuery ajax in PHP with MySQL database without refreshing the whole web page:
- Step 1: Create index.php To Display Image File Upload Form
- Step 2: Create db.php For Database Configuration
- Step 3: Create upload-image.php to Upload Image into Database using jQuery ajax with php script
- Step 4: Upload Image File using ajax in PHP
Step 1: Create index.php To Display Image File Upload Form
First of all, create an index.php file and update the below HTML code into your index.php file.
<html lang="en">
<head>
<title>Upload image using php and ajax whithout refreshing page </title>
<!-- Bootstrap Css -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function() {
$(".upload-image").click(function(){
$(".form-horizontal").ajaxForm({target: '.preview'}).submit();
});
});
</script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">PHP - Image Uploading with Form JS Example</a>
</div>
</div>
</nav>
<div class="container">
<form action="upload-image.php" enctype="multipart/form-data" class="form-horizontal" method="post">
<div class="preview"></div>
<input type="file" name="image" class="form-control" style="width:30%" />
<button class="btn btn-primary upload-image">Save</button>
</form>
</div>
</body>
</html>
This HTML code shows the image upload form, so using this form you can upload the images on the DB table and project folder.
Step 2: Create db.php For Database Configuration
In this step, create a file name db.php and update the below code into your file.
<?php
$servername='localhost';
$username='root';
$password='';
$dbname = "my_db";
$conn=mysqli_connect($servername,$username,$password,"$dbname");
if(!$conn){
die('Could not Connect MySql Server:' .mysql_error());
}
?>
This code is used to create a MySQL database connection in your PHP project.
Step 3: Create upload-image.php to Upload Image into Database using jQuery ajax with php script
create a new file name upload-image.php file and update the below code into your upload.php file.
<?php
require_once "db.php";
if(isset($_POST) && !empty($_FILES['image']['name'])){
$name = $_FILES['image']['name'];
list($txt, $ext) = explode(".", $name);
$image_name = time().".".$ext;
$tmp = $_FILES['image']['tmp_name'];
if(move_uploaded_file($tmp, 'upload/'.$image_name)){
mysqli_query($conn,"INSERT INTO pictures (title)
VALUES ('".$image_name."')");
echo "<img width='200px' src='upload/".$image_name."' class='preview'>";
}else{
echo "image uploading failed";
}
}
?>
This PHP code uploads the image in the DB table and project folder.
Step 4: Start Upload Image File using ajax in PHP App
Let’s start your upload image file using jQuery ajax in PHP with MySQL database project to upload image into your database and server directories.
Conclusion
In this tutorial, you have learned how to upload images using jquery and ajax without refresh the whole web page.
