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.
		

			

				
			

				
			

				
		
		
	
	

		 
	

		 
	

		 
	<-- 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