Ajax Image Upload Using PHP and jQuery Without Refreshing Page

In this tutorial, you will learn how to upload image using ajax and jQuery without refresh the whole web page.

As well as learn how to store images in the PHP project folder and database.

PHP Image Upload Using jQuery and Ajax Without Refreshing Page

Follow following the below steps and upload image using ajax and jquery without refreshing the whole web page in PHP with MySQL:

Step 1: Create index.php

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>


<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 connection.php

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

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.

Conclusion

In this tutorial, you have learned how to upload images using jquery and ajax without refresh the whole web page.