<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<form action="" method="post" enctype="multipart/form-data" id="img_upload_form">
    <div class="form-group">
        <input type="file" class="form-control-file" name="file_image" id="file_image">
    </div>
    <button type="submit" class="btn btn-primary btn-sm">upload</button>
</form>

$(function() {

    $("#img_upload_form").on("submit", function() {
        event.preventDefault();

        var fd = new FormData();
        var files = $('#file_image')[0].files[0];
        fd.append('file_image',files);

        if (files == undefined) {
            alert('Plese select a image');
            return false;
        }
        $("#uploaded_images_preview").html('<div class="text-center m-2">loading...</div>');

        $.ajax({
            url: 'upload.php',
            type: "POST",
            data: fd,
            contentType: false,
            cache: false,
            processData: false,
            dataType: "json",
            success : function(data) {
                if (data.status == 'success') {

                    var img = '<div class="text-center">'+

                    '<img class="img-thumbnail" src="'+(data.image_data.thumb == "" ? data.image_data.url : data.image_data.thumb)+'" alt="demo image">'+
                    '</div>'+

                    '<div class="card-body text-left">'+
                    '    <pre>Name      : '+data.image_data.name+'</pre>'+
                    '    <pre>Type      : '+data.image_data.type+'</pre>'+
                    '    <pre>Size      : '+data.image_data.size_format+'</pre>'+
                    '    <pre>Size byte : '+data.image_data.size+'</pre>'+
                    '    <pre>Width     : '+data.image_data.width+'px</pre>'+
                    '    <pre>Height    : '+data.image_data.height+'px</pre>'+
                    '    <pre>Thumb      : '+data.image_data.thumb+'</pre>'+
                    '   <pre>URL       : '+data.image_data.url+'</pre>'+
                    '</div>';

                    $("#uploaded_images_preview").html(img);


                }else{

                    $("#uploaded_images_preview").html('<div class="alert alert-danger" role="alert">'+data.msg+'</div>');
                }
                $('#file_image').val('');
            },
            error : function(xhr) {
                $("#uploaded_images_preview").html('<div class="alert alert-danger" role="alert">error '+xhr.status+ " "+xhr.statusText+'</div>');
            }
        })
    });
});