How to upload image using jQuery AJAX in PHP

Tech Area
January 20, 2024

In this tutorial, We will learn how to upload image using JQuery AJAX in PHP.

Files used in this tutorial:

1- connection.php (database connection file)

2- index.php (upload form)

3- upload.php (upload file and insert into database)

Below are the step by step process of how to upload image using Jquery AJAX.

Step 1: Create a Database connection

In this step, create a new file connection.php to create database connection.

connection.php

<?php
$server = "localhost";
$username = "root";
$password = "";
$database = "college_db";
$connection = mysqli_connect("$server","$username","$password");
$select_db = mysqli_select_db($connection, $database);
if(!$select_db)
{
	echo("connection terminated");
}
?>

Step 2: Create index.php

In this step, create a new file index.php. This is the main file used to implement AJAX to upload file using AJAX.

This screenshot shows the file upload form.

index.php

<html>  
<head>  
    <title>Upload Image</title>  
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
</head>
<style>
 .box
 {
  width:100%;
  max-width:600px;
  background-color:#f9f9f9;
  border:1px solid #ccc;
  border-radius:5px;
  padding:16px;
  margin:0 auto;
 }
 .msg
{
  color: red;
  font-weight: 700;
} 
</style>
<body>  
    <div class="container">  
    <div class="table-responsive">  
    <h3 align="center">Upload Image using AJAX</h3>
    <form id="ajaxupload" method="post" enctype="multipart/form-data">
     <div class="box">
      <div class="form-group">
       <label for="file">Select File</label>
       <input type="file" name="upload-image" id="upload-image" class="form-control"/>
      </div>  
      <div class="form-group">
       <input type="submit" id="upload" name="upload" value="Submit" class="btn btn-success" />
      </div>
      <p class="msg"></p>
     </div>
   </form>
   </div>  
  </div>
 </body>  
</html>

Now use jquery AJAX script.

<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $("#ajaxupload").submit(function(e){
      e.preventDefault();
      var formval = new FormData(this);
      $.ajax({
        url: 'upload.php',
        method: 'post',
        data: formval,
        cache: false,
        processData: false,
        contentType: false,
        success: function(data){
          $('.msg').html(data);
        }
      });
    });
  });
</script>

Step 3: Create new file for upload file

In this step, create a new file upload.php. This file used to upload file.

upload.php

<?php
require_once('connection.php');
$dir = 'uploads/';
$image = $_FILES['upload-image']['name'];
$tmp = $_FILES['upload-image']['tmp_name'];
$targetfile = $dir.$image;
if(move_uploaded_file($tmp, $targetfile))
{
	$insert_query = mysqli_query($connection, "insert into tbl_data set image='$image'");
	if($insert_query>0)
	{
		echo "Image Uploaded Successfuly!";
	}
}
else
{
	echo "Error!";
}
?>

Download Source Code

C Input Output (I/O)

Subscribe us via Email

Join 10,000+ subscriber

Subscribe on YouTube

PHP Projects

Student record system project in PHP and MySQL Last Updated: July 3, 2024

Food ordering system project in PHP and MySQL Last Updated: June 27, 2024

Tourism management system project in PHP and MySQL Last Updated: June 24, 2024

Restaurant table booking system project in PHP and MySQL Last Updated: February 22, 2024

Hostel management system project in PHP and MySQL Last Updated: February 14, 2024

Online Pizza Delivery project in PHP Last Updated: February 4, 2024