Image Upload using Ajax in 4 Steps

In this article, we create an Ajax-based image uploading system. 4 steps to creating Image upload using ajax system,

  • Creating an HTML form with a file type input field.
  • Including Jquery CDN link on the header.
  • creating a JQuery script for posting the image data to the PHP insertion script.
  • Creating PHP DB connection and insert the image into the database using MySQL insertion query.
Image Upload using Ajax

Create an HTML Form

We create an HTML form with a file type input field. Also, include enctype attribute on the form because this attribute is important for posting file type to the database.

<form enctype="multipart/form-data" id="uploadForm" action="add.php" method="post">
<table>
<tr>
<th>Name</th>
<td> <input type="text" id="name" name="name" placeholder="Enter name"> </td>
</tr>
<tr>
<th>User Name</th>
<td> <input id="uname" type="text" name="uname" placeholder="Enter User Name"> </td>
</tr>
<tr>
<th>E-mail</th>
<td> <input type="text" id="email" name="email" placeholder="Enter Email"> </td>
</tr>
<tr>
<th>Password</th>
<td> <input type="text" id="password" name="password" placeholder="Enter Password"> </td>
</tr>
<tr>
<th>Upload Photo</th>
<td> <input type="file" id="img" name="img"> </td>
</tr>
<tr> <td><input type="submit" onclick="data()" value="submit"></td> </tr>
</table>
</form>

Including JQuery CDN

It is important for the execution of the JQuery source code of upload image with ajax jquery.

<script
  src="https://code.jquery.com/jquery-2.2.0.min.js"
  integrity="sha256-ihAoc6M/JPfrIiIeayPE9xjin4UWjsx2mjW/rtmxLM4="
  crossorigin="anonymous"></script>

JQuery Script for Posting the Image

In this ajax image uploading script, we take the data from the HTML Form and posted to the PHP file for the database insertion.

<script type="text/javascript">
$(document).ready(function (e){
$("#uploadForm").on('submit',(function(e){ e.preventDefault();
$.ajax({
url: "add.php",
type: "POST",
data: new FormData(this),
contentType: false, cache: false, processData:false,
success: function(data){
alert("Data inserted successfully");
},
error: function(){}
});
}));
});
</script>

Inserting Image into the Database using MySQL

First, we create the PHP database connection and get all the form data which are posted by Ajax using PHP $_POST method.

<?php
//DB Connection 
$con=mysqli_connect("DB_HOST", "DB_USERNAME", "DB_PASSWORD", "DB_NAME" );

$name = $_POST['name'];
$uname = $_POST['uname'];
$pass = $_POST['password'];
$email = $_POST['email'];

//image uploading
if($_FILES['img']['name']){

    move_uploaded_file($_FILES['img']['tmp_name'], "image/".$_FILES['img']['name']);

    $img = "image/".$_FILES['img']['name'];

    }

$sql="INSERT INTO `user`(`name`, `uname`, `email`, `password`, `img`) VALUES ('$name', '$uname', '$email', '$pass', '$img')";

mysqli_query($con, $sql);
?>

Complete Example of Upload image using AJAX in PHP

Creating two PHP files,

  • index.php
  • add.php (For insertion on the database)

index.php

<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
</head>
<body>
<script
  src="https://code.jquery.com/jquery-2.2.0.min.js"
  integrity="sha256-ihAoc6M/JPfrIiIeayPE9xjin4UWjsx2mjW/rtmxLM4="
  crossorigin="anonymous"></script>
<script type="text/javascript">

$(document).ready(function (e){
$("#uploadForm").on('submit',(function(e){ e.preventDefault();
$.ajax({
url: "add.php",
type: "POST",
data: new FormData(this),
contentType: false, cache: false, processData:false,
success: function(data){
alert("Data inserted successfully");
},
error: function(){}
});
}));
});
</script>
<form enctype="multipart/form-data" id="uploadForm" action="add.php" method="post">
<table>
<tr>
<th>Name</th>
<td> <input type="text" id="name" name="name" placeholder="Enter name"> </td>
</tr>
<tr>
<th>User Name</th>
<td> <input id="uname" type="text" name="uname" placeholder="Enter User Name"> </td>
</tr>
<tr>
<th>E-mail</th>
<td> <input type="text" id="email" name="email" placeholder="Enter Email"> </td>
</tr>
<tr>
<th>Password</th>
<td> <input type="text" id="password" name="password" placeholder="Enter Password"> </td>
</tr>
<tr>
<th>Upload Photo</th>
<td> <input type="file" id="img" name="img"> </td>
</tr>
<tr> <td><input type="submit" onclick="data()" value="submit"></td> </tr>
</table>
</form>
</body>
</html>

add.php

<?php
//DB Connection 
$con=mysqli_connect("DB_HOST", "DB_USERNAME", "DB_PASSWORD", "DB_NAME" );

$name = $_POST['name'];
$uname = $_POST['uname'];
$pass = $_POST['password'];
$email = $_POST['email'];

//image uploading
if($_FILES['img']['name']){

    move_uploaded_file($_FILES['img']['tmp_name'], "image/".$_FILES['img']['name']);

    $img = "image/".$_FILES['img']['name'];

    }

$sql="INSERT INTO `user`(`name`, `uname`, `email`, `password`, `img`) VALUES ('$name', '$uname', '$email', '$pass', '$img')";

mysqli_query($con, $sql);
?>

Also check:

Happy Coding..!

Add a Comment

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