Ajax ile sayfa yenilenmeden resim yükleme nasıl yapılır?

Merhaba arkadaşlar ajax ile resim yükleme konusunu anlatmaya çalışacağım. bildiğiniz üzere aslında ajax ile resim upload yapılamamakta çünkü ajax xmlrequest dili ile çalışıyor birçok makalede karşılaştım ve hazır uygulamalar var onlardada iframe mantığı ile yükletiyorlar fakat ajax bunun üzerine bir kütüphane oluşturmuş olması gerekki araştırmalarım sonuc verdi ve bunu sizlerle paylaşmak istedim şimdi gelelim kullanımına.

1) js kütüphanesini sitenizde kullanmak istediğiniz adreste script tagının src kısmına yapıştırın
https://ismailgultekin.com/demo/ajaxfileupload/ajaxfileupload.js şöyle yazmanız yeterli

   
   


Ajax ile sayfa yenilenmeden resim yükleme

Jquery, Ajax ve Php kullanarak yazdığım script umarım faydalı olmuştur.

Yazılım Uzmanı İsmail GÜLTEKİN
 
 
 
<-- Geri Dön Whatsapp Mesaj Gönder

Css Kodlarımız ..

#disalan{
			width: 800px;text-align:center;margin: 0 auto;
		}

		.bglinear{background-image: linear-gradient(180deg, #F16720 0%, #F58907 100%);}

		#canvas{ 
			font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
			width: 750px;
			background-color: #F16720;
			margin: 0 auto;
			padding:50px 25px;
			text-align:center;
		}

			#canvas .yuvarlak{
				text-align:center;
				width: 20%; margin: 20px auto 60px auto;			
			}
		
			#canvas .yuvarlak h2{font-size:17px;color:#61dafb;font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;}
			#canvas .yuvarlak h2 a{margin: 0 auto;color:#FFF;font-size:18px;font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;}

		#canvas h1{color:#fff;font-size: 17px;text-transform:uppercase;font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;margin-bottom: 20px;}
		#canvas p{color:#fff;font-size: 14px;font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;}
		
		#capture{padding:7px 10px; background-color:black; font-size:16px;color:white;text-decoration:none;}
		#snc{
			display:none;
			margin: 0 auto;
			text-align:center;
			overflow: hidden;
		}
		.alink{
			font-size:16px;padding:5px;background-color:red;color:white;text-decoration:none;
		}

		#upload_file{text-align: center;}
		#upload_file input{width: 50%;height: 40px;margin-bottom: 20px;}
		.inputText {
			margin-bottom: 20px;
		    font-size: 14px;
		    color: #57c7df;
		    border: 1px solid #57c7df;
		    background-color: #F0F0F0;
		}

2)saveimg.php adında php dosyası oluşturalım ve içine şu kodları gömelim

//@header('Access-Control-Allow-Origin: *');//Eğer acsess kontrol hatası verirse bunu çalışır hale getirin.

$random   = "deneme_".rand(100, 1000);
$id       = $_POST['id'];
$ad       = addslashes($_POST['ad']);

if (isset($_FILES) && !empty($_FILES)) {
    $file = $_FILES['userfile'];
    $name = $file['name'];
    $eyol = $file['tmp_name'];

    $uzanti = substr($name , -4);
    $yeniyol = "output/".$random.$uzanti;

    $savefile = @move_uploaded_file($eyol, $yeniyol);

	if($savefile){
		$status = "Yüklendi"; $dosya = $random.$uzanti; 
		//Eğer veri tabanına kaydedecekseniz. 
		//Post ile gelen -> $ad değişkeni ve resim dosyası $dosya
	}else{
		$status ="Error"; $dosya = 0;
	}
	
}else{
	//echo "Error";//var_dump($_FILES);
	$status ="Error"; $dosya = 0;
}

$response = array('status' => $status, 'dosya' => $dosya);
echo json_encode($response);

İşte bukadar ben sorunsuz bir şekilde kullanıyorum umarım yardımcı olmuşumdur tek yapmanız gereken resmi ajax ile gönderdiğiniz urlde hangi web dilini kullanıyorsanız ben php belirttim orada upload yaptıracaksınız bir sorun olması halinde yorum yazarsanız yardımcı olmaya çalışırım

 Demo Linki için Tıklayın

Hasan Gündoğmuş

14:15:16 28.06.2021

İsmail bey, merhaba, İnternette, çoklu resim yükleme konusunda tarama yaptım, yapıyorum hala, işime yarayan bir çalışma, proje bulamadım. Çoklu resim yüklemelerin tamamı ajax ve jquery ile oluyor, ancak bu script lerle yüklenen resimler sayfayı refresh yapınca kayboluyor, sunucuda bir klasöre de kaydediyor, ama o kaydolanlar resimler görsel hale gelmeyince bir işe yaramıyor. Örneğin, araba satış ilanlarında 35 adet resim yüklenebiliyor ve gösterilebiliyor, bunun gibi yüklenen resimlerin bir php sayfasında display olmalı, her bir yüklemede çoklu resimler ilgili php sayfalarda kaydolmalı. Bu nasıl oluyo?... İlan sayfalarındaki gibi çoklu resim yüklemeyi nasıl yapabiliriz? Bu konuda yardımcı olursanız ve e-mail ile zahmet olmazsa bilgilendirirseniz çok memnun olurum.. Teşekkürler, Hasan

Yanıtla

ismail gültekin

14:55:11 28.06.2021

Merhaba Hasan bey, Öncelikle kaybolma olayı resimlerin klasöre veya bir dosya yoluna yüklenirken aynı zamanda veri tabanına kaydedilmesi gerekiyor. Sizin aradığınız tam olarak jquery ajax php multi resim upload ve veri tabanlarına php & mysql olarak yapmalısınız. Tabiki yardımcı olurum.

(İsmail bey, merhaba, İnternette, çoklu resim yükleme konusunda tarama yaptım, yapıyorum hala, işime yarayan bir çalışma, proje bulamadım. Çoklu resim yüklemelerin tamamı ajax ve jquery ile oluyor, ancak bu script lerle yüklenen resimler sayfayı refresh yapınca kayboluyor, sunucuda bir klasöre de kaydediyor, ama o kaydolanlar resimler görsel hale gelmeyince bir işe yaramıyor. Örneğin, araba satış ilanlarında 35 adet resim yüklenebiliyor ve gösterilebiliyor, bunun gibi yüklenen resimlerin bir php sayfasında display olmalı, her bir yüklemede çoklu resimler ilgili php sayfalarda kaydolmalı. Bu nasıl oluyo?... İlan sayfalarındaki gibi çoklu resim yüklemeyi nasıl yapabiliriz? Bu konuda yardımcı olursanız ve e-mail ile zahmet olmazsa bilgilendirirseniz çok memnun olurum.. Teşekkürler, Hasan )

Yanıtla

Görüş Hata Bildir

Güvenlik Kodunuz:

Yorum Yap

Yorum kodunuz:

0.0589