v2.5.2
Giriş yap

input resim yükleme

mustafa25
57 defa görüntülendi

form kullanmadan input file ile resim seçip resim dosyasının içine yükleme istiyorum ama sayfa yenilemek istemiyorum ekrandaki öz izlemeyi filen kaybetmemek için

Cevap yaz
Cevaplar (4)
emmir2
3 gün önce
 <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';
	}

}

?>
gokcin
4 gün önce

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.

mustafa25
6 gün önce

tayfun hoca sadece ön izleme kısmını anlatmış benim demek istediğim hem ön izleme olsun hemde resmi resim daysama yüklemek istiyorum ve resim yüklenirken sayfa yenilenmesin ve o ön izleme olduğu yerde kalsın

emmir2
6 gün önce

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