PHP MySQL AJAX Image Upload Example
Mar 07, 2022 . Admin
Hello Friends,
I am going to explain you PHP MySQL AJAX image upload. You will learn how to PHP AJAX upload file. In side this article we will see how to image upload using AJAX PHP MySQL.
This article will give you simple example of image upload using AJAX PHP MySQL. We will use get simple upload image Jquery AJAX PHP MySQL.
You can use from how to upload image in Database using PHP and MySQL. I will give you simple how to image upload Jquery AJAX PHP 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>PHP MySQL AJAX Image Upload - Mywebtuts.com</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>PHP MySQL AJAX Image Upload - 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...