Image Upload in PHP with jQuery Ajax

Image Upload in PHP with jQuery Ajax

Image file upload in PHP using jQuery ajax; In this tutorial, you will learn how to upload image file using ajax and jQuery without refresh the whole web page. As well as learn how to store images in the PHP project folder and Mysql database.

How to Image Upload in PHP with jQuery Ajax

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">
<title>Upload image using php and ajax whithout refreshing page </title>

<!-- Bootstrap Css -->
<link href="" rel="stylesheet">

<script src=""></script>

        $(document).ready(function() { 
            	$(".form-horizontal").ajaxForm({target: '.preview'}).submit();
	<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 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>

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.

	$dbname = "my_db";
		  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.

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'>";
		echo "image uploading failed";


This PHP code uploads the image in the DB table and project folder.


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

Recommended PHP Tutorials


My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of I like writing tutorials and tips that can help other developers. I share tutorials of 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 from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published.