Here's a step-by-step guide to upload and display an image in PHP using AJAX





Step 1: HTML Form (index.html)

Create an HTML form with an input field of type "file" to allow users to upload images. Also, create a container div where the uploaded image will be displayed.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Upload and Display Image</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#uploadForm").submit(function(e){
                e.preventDefault();
                var formData = new FormData(this);
                $.ajax({
                    url: 'upload.php',
                    type: 'POST',
                    data: formData,
                    success: function(response){
                        $("#imageContainer").html(response);
                    },
                    cache: false,
                    contentType: false,
                    processData: false
                });
            });
        });
    </script>
</head>
<body>
    <h2>Upload Image</h2>
    <form id="uploadForm" enctype="multipart/form-data">
        <input type="file" name="image">
        <button type="submit">Upload</button>
    </form>
    <h2>Uploaded Image</h2>
    <div id="imageContainer"></div>
</body>
</html>

Step 2: PHP Script to Handle Image Upload (upload.php)

Create a PHP script to handle the upload process. This script will move the uploaded image file to a designated folder on the server and return the path to the uploaded image.

<?php
if(isset($_FILES["image"])) {
    $target_dir = "uploads/";
    $target_file = $target_dir . basename($_FILES["image"]["name"]);
    $imageFileType = strtolower(pathinfo($target_file, PATHINFO_EXTENSION));
    if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg" && $imageFileType != "gif") {
        echo "Only JPG, JPEG, PNG & GIF files are allowed.";
        exit();
    }
    if(move_uploaded_file($_FILES["image"]["tmp_name"], $target_file)) {
        echo '<img src="'.$target_file.'" width="300" />';
    } else {
        echo "Sorry, there was an error uploading your file.";
    }
}
?>





Ensure that you have a folder named "uploads" in the same directory as your PHP files to store the uploaded images.