Skip to content

All topics  /  jQuery

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

jQuery ·

When “Ajax Image Upload with Form Data using jQuery PHP 8 and MySQL” moves through design, development and browser testing, employee time clock software can clarify hand-offs and time spent on revisions while leaving code quality, accessibility and released behaviour as the real measures of success.

For API changes, browser support and current usage patterns, compare the snippet with the official jQuery website before adopting it in production.

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/[email protected]/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...

More on this topic