How to Upload & Preview Image using JQuery Ajax PHP 8 and MySQL?
Jun 06, 2022 . Admin
Hello Friends,
In this example, you will learn How to Upload & Preview Image Using jQuery AJAX PHP 8 and MySQL?. In this article, we will implement a AJAX Image Upload in PHP 8 with jQuery. In this article, we will implement a Ajax Image Upload with Form Data using jQuery PHP 8 and MySQL. you can understand a concept of Upload image using ajax in PHP 8 example. Let's see bellow example jQuery Image File Upload with Form Data using PHP 8.
This article will give you simple example of How To Upload An Image Using AJAX In PHP 8 And MySQL.
So, let's see bellow solution:
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>How to Upload & Preview Image Using jQuery AJAX PHP 8 and MySQL?</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-md-12">
<div class="card w-75 m-auto">
<div class="card-header text-center bg-primary text-white">
<h4>How to Upload & Preview Image Using jQuery AJAX PHP 8 and MySQL? - Mywebtuts.com</h4>
</div>
<div class="card-body">
<form action="upload.php" id="form" method="post" enctype="multipart/form-data">
<img id="preview-image" width="300px" class="mb-2">
<div class="form-group">
<label for="myImage"><strong>Select Image : </strong><span class="text-danger">*</span></label>
<input type="file" id="myImage" class="form-control">
<p id="errorMs" class="text-danger"></p>
</div>
<div class="d-flex justify-content-center">
<input type="submit" class="btn btn-success" id="submit" value="Upload">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#myImage').change(function(){
let reader = new FileReader();
reader.onload = (e) => {
$('#preview-image').attr('src', e.target.result);
}
reader.readAsDataURL(this.files[0]);
});
$("#submit").click(function(e){
e.preventDefault();
let form_data = new FormData();
let img = $("#myImage")[0].files;
if(img.length > 0){
form_data.append('my_image', img[0]);
$.ajax({
url: 'upload.php',
type: 'post',
data: form_data,
contentType: false,
processData: false,
success: function(res){
const data = JSON.parse(res);
if (data.error != 1) {
alert('Upload suceesfully.');
}else {
$("#errorMs").text(data.em);
}
}
});
}else {
$("#errorMs").text("Please select an image.");
}
});
});
</script>
</body>
</html>
upload.php
<?php
if (isset($_FILES['my_image'])) {
$sname = "localhost";
$uname = "root";
$password = "";
$db_name = "store";
$conn = mysqli_connect($sname, $uname, $password, $db_name);
if (!$conn) {
echo "Connection failed!";
exit();
}
$img_name = $_FILES['my_image']['name'];
$img_size = $_FILES['my_image']['size'];
$tmp_name = $_FILES['my_image']['tmp_name'];
$error = $_FILES['my_image']['error'];
if ($error === 0) {
if ($img_size > 1000000) {
$em = "Sorry, your file is too large.";
$error = array('error' => 1, 'em'=> $em);
echo json_encode($error);
exit();
}else {
$img_ex = pathinfo($img_name, PATHINFO_EXTENSION);
$img_ex_lc = strtolower($img_ex);
$allowed_exs = array("jpg", "jpeg", "png");
if (in_array($img_ex_lc, $allowed_exs)) {
$new_img_name = uniqid("IMG-", true).'.'.$img_ex_lc;
$img_upload_path = "c:/xampp7/htdocs/uploads/".$new_img_name;
move_uploaded_file($tmp_name, $img_upload_path);
$sql = "INSERT INTO user (image)
VALUES ('$new_img_name')";
mysqli_query($conn, $sql);
$res = array('error' => 0, 'src'=> $new_img_name);
echo json_encode($res);
exit();
}else {
$em = "You can't upload files of this type";
$error = array('error' => 1, 'em'=> $em);
echo json_encode($error);
exit();
}
}
}else {
$em = "unknown error occurred!";
$error = array('error' => 1, 'em'=> $em);
echo json_encode($error);
exit();
}
}
?>
Output:
It will help you...