In this article, we create an Ajax-based image uploading system. 4 steps to creating Upload Image Using Ajax functionality,
- 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.
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<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.
|
1 |
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> |
JQuery Script for Upload image using AJAX
In this ajax image uploading script, we take the data from the HTML Form and posted to the PHP file for the database insertion.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<!DOCTYPE html> <html> <head> <title>Registration Form</title> </head> <body> <script src="https://code.jquery.com/jquery-2.2.0.min.js"></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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<?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:
Here is the complete working source code for Upload image using AJAX in PHP.
Happy Coding..!
Was this article helpful?
YesNo
[…] 4 Steps to Upload Image Using Ajax and JQuery […]
[…] Also Read: 4 Steps to Upload Image Using Ajax and JQuery […]
[…] Also Read: 4 Steps to Upload Image Using Ajax and JQuery […]
[…] + Read More Here […]