jQuery Ajax Image Upload in PHP MySQL

jQuery Ajax Image Upload in PHP MySQL

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.

Recommended PHP Tutorials

AuthorAdmin

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

Leave a Reply

Your email address will not be published. Required fields are marked *