Ajax Image Upload with Form Data using jQuery PHP 8 and MySQL

Jun 06, 2022

.

Admin

Ajax Image Upload with Form Data using jQuery PHP 8 and MySQL

Hello Friends,

This example is focused on Ajax Image Upload with Form Data using jQuery PHP 8 and MySQL. This article will give you simple example of How to Upload & Preview Image Using jQuery AJAX PHP 8 and MySQL?. We will look at example of AJAX Image Upload in PHP 8 with jQuery. if you want to see example of Upload image using ajax in PHP 8 example then you are a right place.

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>Ajax Image Upload with Form Data using jQuery 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>Ajax Image Upload with Form Data using jQuery PHP 8 and MySQL - Nicesnippets.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...

#PHP 8