PHP 8 Preview an Image Before Uploading using jQuery

jQuery · 03-Apr-2023

When “PHP 8 Preview an Image Before Uploading using jQuery” moves through design, development and browser testing, the linked planning resource 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 article will provide some of the most important example PHP 8 Preview an Image Before Uploading using jQuery. This article goes in detailed on How to Image Upload and Preview using Ajax in PHP 8. if you have question about AJAX Image and File Upload in PHP 8 with jQuery then I will give simple example with solution. step by step explain PHP 8 Ajax Image Upload with Preview Example.

This article will give you simple example of PHP 8 + Ajax Upload Multiple Image with Preview

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 8 Preview an Image Before Uploading using jQuery</Nicesnippets>
    <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 text-white" style="background: black;">
                        <h4>PHP 8 Preview an Image Before Uploading using jQuery - 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="200px" 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); 
                    $("#errorMs").hide();
                }   
                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) {
                                $('.form-group').prepend('<p class="alert alert-success">Upload Successfully.</p>')
                            }else {
                                $("#errorMs").text(data.em);
                            }
                            $('#preview-image').fadeOut(800);
                        }
                    });
                }else {
                    $("#errorMs").text("Please select an image.");
                }
            });
        });
    </script>
</body>
</html>

upload.php

<?php
    if (isset($_FILES['my_image'])) {

        
        $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 = "uploads/".$new_img_name;
                    move_uploaded_file($tmp_name, $img_upload_path);

                    
                    $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...