<script src="https://code.jquery.com/jquery-3.1.1.min.js" ></script>
  <form   method="POST"  id="f_ekle" class="wpcf7-form"   enctype="multipart/form-data">
            <div class="col-sm-12">
              <p class=" your-name">
                <input type="file" name="resim" id="imgInp" /><br>
                <i id="check" style="color:green;font-size: 100px;display: block;position: absolute;display: none;" class="fa fa-check"></i>
                <img style="border:1px dotted green;width: 200px; height: auto;" id="temp" src="site.jpg" alt="Fotoğraf seç" />
              </p>
              <div id="text"></div>
            </div>
            <div class="col-sm-12">
              <p class="contact-form-elements"> 
                <button style="text-transform: none;" type="submit"  class=" btn btn-primary ">Ekle</button> 
              </p>
            </div>
            <div class="wpcf7-response-output wpcf7-display-none"></div>
           
          </form><!-- /.wpcf7-form -->
<script type="text/javascript" src="upload.js" ></script>

function readURL(input) {

  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      jQuery('#temp').attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
  }
};

jQuery("#imgInp").on("change",function() {
  readURL(this);//fonksiyonu çalıştır.
  jQuery("#check").css("display","none");
  jQuery("#text").css("display","none");
});



jQuery("#f_ekle").on("submit", function(e){
 jQuery("#text").css("display","block");
 e.preventDefault();

 jQuery.ajax({
   url  : "upload.php",
   type : "POST",
   data : new FormData(this),
   contentType : false,
   processData : false,

   success: function(cevap){
     if (jQuery.trim(cevap) == "ok") {

      jQuery("#text").html('<div  class="alert alert-info alert-dismissable">Ekledi</div>');
      jQuery("#check").css("display","block");


    }else if(jQuery.trim(cevap) == "format"){

     jQuery("#text").html('<div  class="alert alert-info alert-dismissable">Format Hata!</div>');

   }else if(jQuery.trim(cevap) == "bos"){
    
     jQuery("#text").html('<div  class="alert alert-info alert-dismissable">Resim Seç!</div>');
   }
 }
});
});

<?php 
extract($_POST);



function seo($s) {
	$tr = array('ş','Ş','ı','I','İ','ğ','Ğ','ü','Ü','ö','Ö','Ç','ç','(',')','/',' ',',','?');
	$eng = array('s','s','i','i','i','g','g','u','u','o','o','c','c','','','-','-','','');
	$s = str_replace($tr,$eng,$s);
	$s = strtolower($s);
	$s = preg_replace('/&amp;amp;amp;amp;amp;amp;amp;amp;amp;.+?;/', '', $s);
	$s = preg_replace('/\s+/', '-', $s);
	$s = preg_replace('|-+|', '-', $s);
	$s = preg_replace('/#/', '', $s);
	$s = str_replace('.', '', $s);
	$s = trim($s, '-');
	return $s;
};



$whitelist = array('jpg', 'jpeg', 'png', 'gif');//geçerli formatlar
$name      = null;
$error     = 'Resim seçilmedi.';
$resimyol  = 'upload/';//kaydedilecek dosya konumu buradan belirlenir.




if (isset($_FILES)) {

	
	

	if (isset($_FILES['resim']) ) {
		$tmp_name = $_FILES['resim']['tmp_name'];
		$name     = basename($_FILES['resim']['name']);
		$error    = $_FILES['resim']['error'];
		
		if ($error === UPLOAD_ERR_OK) {
			$extension = pathinfo($name, PATHINFO_EXTENSION);

			if (!in_array($extension, $whitelist)) {
				echo 'format';//format desteklemiyor uyarısı
			} else {



	$name1 =  explode('.', $_FILES['resim']['name'],2);//dosyayı iki farklı veri olarak ele alıyoruz


	$name2 = seo($name1[0]);//noktadan önceki veri dosya ismini türkçe karakterden arındırıyoruz.

	$name3 = $name1[1];//noktadan sonraki dosya formatını alıyoruz.

	$name4 = $name2.'.'.$name3;




	$date=date("Ymd_hms"); //tarih ve saat benzersiz bir tanım.

	$benzersizad=$date.$name4;//tarih ve dosyamızın adını birleştiriyoruz.

		if(move_uploaded_file($tmp_name, "$resimyol/$benzersizad")){//bir if sorgusuyla birlikte dosyamızı belitttiğimiz alana yüklüyoruz.


		echo 'ok';//yüklendi
	




	}else {
		echo 'no';
	}

			}
		}
	}else{
		echo 'bos';
	}

}

?>

Bu işlemi yapabilmek için önce ajax'ı kullanman gerekli olacak. Ajax ile dosyayı upload edip, ön izleme yapabilirsin.

Sayfayı yenilemeden yapmak istiyorsan AJAX ile çözmen yeterlidir.

https://www.youtube.com/watch?v=IQjmjOYPIuo
buyur tayfun hoca hazırlamıştı