03-Apr-2023
.
Admin
Hi Dev,
In this blog, I will give you how to upload image in php 8 with ajax. In this tutorial PHP 8 file uploading and storing tutorial with ajax and mysql database. In this tutorial, we will learn how to upload files and images in MySQL Database using ajax.
Image Upload in php 8 with ajax. I am going to show you about image upload in php 8 using jquery ajax. this example will help you php 8 upload image to database with jquery ajax. This article goes in detailed on how to upload and display image in php 8 with ajax. Here, Creating a basic example of php 8 image upload with preview using jquery ajax.
I created simple form with file input. So you have to simple select image and then it will upload in "images" directory of this folder. So you have to simple follow bellow step and get image upload in php 8 ajax application.
Here, I will give you full example for simply Image Upload using php 8 jquery ajax as bellow.
Create Database
In this step you can create database `php_crud`.
Create `table_name` inside the database.
You can execute the following command to create the table columns to store the images in the database.
CREATE TABLE `user` (
`id` int(11) NOT NULL,
`image` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
Database Configuration
config.php
<?php
$servername = 'localhost';
$username = 'root';
$password = 'root';
$dbname = "php_crud";
$conn = mysqli_connect($servername,$username,$password,"$dbname");
if(!$conn){
die('Could not Connect MySql Server:' .mysql_error());
}
?>
index.php
<html>
<head>
<title>PHP AJAX Image Upload</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
#targetLayer{
float:left;
width:150px;
height:150px;
text-align:center;
line-height:150px;
font-weight: bold;
color: #C0C0C0;
background-color: #F0E8E0;
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
}
.image-preview {
width:100%;
height: 100%;
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
}
</style>
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-md-6 offset-3 mt-5">
<div class="card">
<div class="card-header bg-info">
<h4 class="card-heading text-white">PHP 8 Ajax Image Upload - NiceSnippets.com</h4>
</div>
<div class="card-body">
<?php if(!empty($_SESSION['message'])) {?>
<div class="alert text-center alert-success" role="alert">
<?php
echo $_SESSION['message'];
unset($_SESSION['message']);
?>
</div>
<?php }?>
<form id="uploadForm" action="upload.php" method="post">
<div class="row">
<div class="col-md-12 mb-1">
<div id="targetLayer">No Image</div>
</div>
<div class="col-md-12">
<div class="form-group">
<input name="userImage" type="file" class="inputFile form-control" />
</div>
</div>
<div class="col-md-12">
<div class="form-group text-center">
<input type="submit" value="Save" class="btnSubmit btn btn-success" />
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function (e) {
$("#uploadForm").on('submit',(function(e) {
e.preventDefault();
$.ajax({
url: "upload.php",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
success: function(data)
{
$("#targetLayer").html(data);
},
error: function()
{
}
});
}));
});
</script>
</body>
</html>
upload.php
<?php
include 'config.php';
// Send email
if(is_array($_FILES)) {
if(is_uploaded_file($_FILES['userImage']['tmp_name'])) {
$sourcePath = $_FILES['userImage']['tmp_name'];
$targetPath = "images/".$_FILES['userImage']['name'];
if(move_uploaded_file($sourcePath,$targetPath)) {
// Store contactor data in database
$q = "INSERT INTO user(image)
VALUES ('{$targetPath}')";
$sql = mysqli_query($conn, $q);
if(!$sql) {
die("MySQL query failed.");
}
?>
<img class="image-preview" src="<?php echo $targetPath; ?>" class="upload-preview" />
<?php
}
}
}
?>
Now we are ready to run our example so run bellow command for quick run:
php -S localhost:8000
Now you can open bellow URL on your browser:
http://localhost:8000
It will help you....
#PHP 8
#PHP
