PHP Mysql jquery Resim Yükleme Scripti (İmage Upload Example)

<?php 
 
            if (!empty($_FILES["fileToUpload"]["tmp_name"])) {
                $target_dir = "resimler/";
                $target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
                $uploadOk = 1;
                $imageFileType = strtolower(pathinfo($target_file, PATHINFO_EXTENSION));
                $temp = explode(".", $_FILES["fileToUpload"]["name"]);
                $newfilename =  md5(round(microtime(true))) . '.' . end($temp);
// Check if image file is a actual image or fake image
                if (isset($_POST["submit"])) {
                    $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
                    if ($check !== false) {
                        //  echo "File is an image - " . $check["mime"] . ".";
                        $uploadOk = 1;
                    } else {
                        echo "Resim dışında dosya yükleyemezsiniz.";
                        $uploadOk = 0;
                    }
                }
// Check if file already exists
                if (file_exists($target_file)) {
                    echo "Fotoğrafınız yüklenemedi lütfen daha sonra tekrar deneyiniz.";
                    $uploadOk = 0;
                }
// Check file size 3 mb
                if ($_FILES["fileToUpload"]["size"] > 3000000) {
                   echo "Dosya boyutu çok büyük";
                    $uploadOk = 0;
                }
// Allow certain file formats
                if ($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
                    && $imageFileType != "gif") {
                    echo "Sadece JPG, JPEG, PNG & GIF formatında resim yükleyebilirsiniz.";
                    $uploadOk = 0;
                    $newfilename = "";
                }
// Check if $uploadOk is set to 0 by an error
                if ($uploadOk == 0) {
                    // echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
                } else {
                    if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_dir . $newfilename)) {
 
                        echo "Başarıyla yüklendi";
 
                    } else {
                      echo "Bir hata oluştu lütfen tekrar deneyiniz.";
                    }
                }
 
?>
<style>
* {margin: 0; padding: 0; box-sizing: border-box;}
body {background: #f6f6f6; color: #444; font-family: 'Roboto', sans-serif; font-size: 16px; line-height: 1;}
.container {max-width: 1100px; padding: 0 20px; margin:0 auto;}
.panel {margin: 100px auto 40px; max-width: 500px; text-align: center;}
.button_outer {background: #83ccd3; border-radius:30px; text-align: center; height: 50px; width: 200px; display: inline-block; transition: .2s; position: relative; overflow: hidden;}
.btn_upload {padding: 17px 30px 12px; color: #fff; text-align: center; position: relative; display: inline-block; overflow: hidden; z-index: 3; white-space: nowrap;}
.btn_upload input {position: absolute; width: 100%; left: 0; top: 0; width: 100%; height: 105%; cursor: pointer; opacity: 0;}
.file_uploading {width: 100%; height: 10px; margin-top: 20px; background: #ccc;}
.file_uploading .btn_upload {display: none;}
.processing_bar {position: absolute; left: 0; top: 0; width: 0; height: 100%; border-radius: 30px; background:#83ccd3; transition: 3s;}
.file_uploading .processing_bar {width: 100%;}
.success_box {display: none; width: 50px; height: 50px; position: relative;}
.success_box:before {content: ''; display: block; width: 9px; height: 18px; border-bottom: 6px solid #fff; border-right: 6px solid #fff; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg); position: absolute; left: 17px; top: 10px;}
.file_uploaded .success_box {display: inline-block;}
.file_uploaded {margin-top: 0; width: 50px; background:#83ccd3; height: 50px;}
.uploaded_file_view {max-width: 300px; margin: 40px auto; text-align: center; position: relative; transition: .2s; opacity: 0; border: 2px solid #ddd; padding: 15px;}
.file_remove{width: 30px; height: 30px; border-radius: 50%; display: block; position: absolute; background: #aaa; line-height: 30px; color: #fff; font-size: 12px; cursor: pointer; right: -15px; top: -15px;}
.file_remove:hover {background: #222; transition: .2s;}
.uploaded_file_view img {max-width: 100%;}
.uploaded_file_view.show {opacity: 1;}
.error_msg {text-align: center; color: #f00}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>$(document).ready(function() {
                                    var btnUpload = $("#upload_file"),
                                        btnOuter = $(".button_outer");
                                    btnUpload.on("change", function(e){
                                        var ext = btnUpload.val().split('.').pop().toLowerCase();
                                        if($.inArray(ext, ['gif','png','jpg','jpeg']) == -1) {
 
                                            $(".error_msg").text("Geçerli resim dosyası değil");
                                        } else {
                                            $(".error_msg").text("");
                                            btnOuter.addClass("file_uploading");
                                            setTimeout(function(){
                                                btnOuter.addClass("file_uploaded");
                                            },3000);
                                            var uploadedFile = URL.createObjectURL(e.target.files[0]);
                                            setTimeout(function(){
                                                $("#uploaded_view").append('<img src="'+uploadedFile+'" />').addClass("show");
                                            },3500);
                                        }
                                    });
                                    $(".file_remove").on("click", function(e){
                                        $("#uploaded_view").removeClass("show");
                                        $("#uploaded_view").find("img").remove();
                                        btnOuter.removeClass("file_uploading");
                                        btnOuter.removeClass("file_uploaded");
                                    });
                                });</script>
<main class="main_full">
	<div class="container">
		<div class="panel">
			<div class="button_outer">
				<div class="btn_upload">
					<input type="file" id="upload_file" name="fileToUpload">
					Upload Image
				</div>
				<div class="processing_bar"></div>
				<div class="success_box"></div>
			</div>
		</div>
		<div class="error_msg"></div>
		<div class="uploaded_file_view" id="uploaded_view">
			<span class="file_remove">X</span>
		</div>
	</div>
</main>