Upload images with PHP and Jquery

Question

I have went over S.O tutorials on uploading images with php and now just added jquery to the mix, but still not getting results back. What am i doing wrong that i failed to pick up? Please assist.

HTML FORM with a little bootstrap

    <div class="container">
        <div class="image-uploading-container justify-content-center">
            <div class="row">
                <div class="col-md-6 col-sm-12 offset-sm-3">
                    <form onsubmit="return false;" enctype="multipart/form-data" method="post">
                        <div class="form-group">
                            <div id="result"></div>
                            <input type="hidden" name="MAX_FILE_SIZE" value="5000000"/>
                            <input type="file" name="upload_image" id="upload_image" accept="image/*" />
                            <button class="btn btn-secondary btn_upload" name="btn_upload">Upload</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

This is the js code

$(function() {
            $('.btn_upload').click(function(){

                var ajaxRequest;
                var upload_image = $('#upload_image').val();

                if ( $.trim(upload_image) == '' ) {
                    $("#result").html("<div class='alert alert-warning'>Upload Field Cannot Be Empty.</div>");
                    console.log('Upload Field Cannot Be Empty.');

                } else {
                    /*
                    $.post("upload_script.php", {upload_image:upload_image}, function(response){
                        console.log(response);
                    });
                    */

                    $.ajax({
                        url: "upload_script.php",
                        type: "POST",
                        data: {upload_image:upload_image},
                        success: function(response) {
                            $("#result").html(response);
                            console.log(response);
                        }
                    });
                }
            });
        });

upload_script.php file

error_reporting( E_ALL );

if ( isset($_POST['btn_upload']) )
{
    $image_name = $_FILES['upload_image']['name'];
    $image_temp = $_FILES['upload_image']['tmp_name'];
    $image_type = $_FILES['upload_image']['type'];
    $image_size = $_FILES['upload_image']['size'];
    $image_path = 'uploads/'.date("Y-m-d").'/';
    /*$image_extn = pathinfo( $image_name, PATHINFO_EXTENSION);*/
    $image_base = $image_path . basename( $image_name );

    $allowed_filetypes = array('.jpg','.jpeg','.png','.gif');
    $ext = substr($image_name, strpos($image_name,'.'), strlen($image_name)-1);


    #Check to see if the upload folder exist, if not, create one
    if ( !file_exists($image_path) ):
        mkdir($image_path, 0778, true);
        exit();
    endif;

    if ( filesize($image_temp) >= 5000000 ):
        echo 'Image Must Be Less That 5MB';
        exit();

    elseif (!in_array($ext, $allowed_filetypes)):
        echo 'The file you attempted to upload is not allowed.';
        exit();

    else:
        $upload_image = move_uploaded_file($image_temp, $image_base);

        if ( $upload_image == TRUE ):
            echo "<img src=uploads\".$image_base.\" height=200 width=300 />";
            exit();
        else:
            echo 'An error has uploading an image.';
            exit();
        endif;

    endif;
}

I am trying to pull out the uploaded images from the folder (uploads) to the browser using img tag

echo "<img src=uploads\".$image_base.\" height=200 width=300 />";