Php ve Jquery ile anlık olarak sayfayı yenilemeden resim yükleyebiliriz. İlk olarak ders başlamadan önce php ile nasıl dosya yüklendiğini bilmiyorsanız burdaki dersimizi izleyebilirsiniz 
. Şimdi bir adet index.php ve custom.js adında dosya oluşturalım siz isterseniz farklı isimlerde verebilirsiniz. İlk olarak index.php içersine bir tane resim seçme butonu koyalım ve ardından jquery ile custom.js dosyalarını sayfamıza dahil edelim.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dosya yükleme uygulaması - Web derslerim</title>
</head>
<body>
<input type="file" name="dosya">
<div class="resim"></div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="custom.js"></script>
</body>
</html>Bu şekilde görünümümüzü oluşturduk. Görünümünü değiştirmek isterseniz Css ile biçim verebilirsiniz. Şimdi jquery kısmına geçebiliriz. Custom.js dosyamızı açalım ve kodlarımızı yazalım .
$(function(){
$('input[name=dosya]').change(function(){ // Dosya seçildiğinde
var form_data = new FormData(); // Form data objesini çağır
form_data.append("dosya", $(this)[0].files[0]); // append metodu ile dosyayı ekle. 1.parametre isimi 2.parametre ise seçtiğimiz dosya
$.ajax({ // Ajax isteği başlat
url:"yukle.php", // yukle.php dosyasına istek gönder
data:form_data, // Veri olarak form data değişkeni içerisine depoladığımız değeleri gönder
processData: false,
contentType: false,
type:"POST", // İsteğimizin tipi post olsun
dataType:"json", // Geriye json olarak değer göndersin
success:function(cevap) // İstek başarılıysa
{
if(cevap.basarili) // Json ile gönderilen basarili değerini varsa çalıştır
{
$('.resim').html('<img src="'+cevap.resimUrl+'" />'); // // Json ile gönderilen basarili değerini varsa resimUrl değerini img etiketi ile göster
}else
{
$('.resim').html(cevap.hata); // Json ile gelen hata değerini yazdır.
}
}
})
});
});Burada yaptığımız işi özetlemek gerekirse jquery ile tipi file olan inputumuz değiştiğinde arkaplanda bir istek yolluyoruz. Ve geriye json ile değer döndürüyoruz. Kodların yanına açıklama satırı olarak ne işe yaradıklarını yazdım . Şimdi artık Php ile dosyamızı yükleyebiliriz. Ajax isteğimizi yukle.php adında bir dosyaya göndermişiz. Bir tane yukle.php adında dosya oluşturalım.
<?php
$dosya = @$_FILES["dosya"];
if(empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower(@$_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest')
{
// Eğer Ajax işlemi dışında dosyaya erişim sağlanırsa hata verdirelim
die("Erişim engellendi!");
}
if(empty($dosya["name"]))
{
// Eğer dosya seçilmemişse
$json["hata"] = "Bir dosya seçiniz!";
}else
{
$dosyaBilgi = pathinfo($dosya["name"]); // Dosya bilgilerini aldık
$yuklenecekKlasor = "dosya"; // Dosyanın yükleneceği klasörü değişkene aktardık
$dosyaAdi = uniqid($dosyaBilgi["filename"]."_"); // Dosya adı oluşturduk. Çıktısı: dosyanıngerçekadı_rastgeledeğer
$uzantilar = array("png","gif","jpeg","jpg"); // İzin verilen dosya uzantıları
$boyut = 500*1024; // İzin verilen dosya boyutu. 500KB
if(!in_array($dosyaBilgi["extension"], $uzantilar))
{
// Eğer geçersiz uzantıysa
$json["hata"] = "Geçersiz dosya uzantısı";
}else if($dosya["size"] > $boyut)
{
// Eğer dosya boyutu fazlaysa
$json["hata"] = "Dosya boyutu en fazla 500kb olabilir!";
}else
{
$tam_url = $yuklenecekKlasor."/".$dosyaAdi.".".$dosyaBilgi["extension"]; // Dosyamızın tam olarak yükleneceği yolu belirliyoruz
if(move_uploaded_file($dosya["tmp_name"], $tam_url)) // Dosyayı geçici olarak yüklendiği yerden tam_url değişkenimizde bellirtiğimiz yere yüklüyoruz
{
// İşlem başarılıysa
$json["basarili"] = "Yükleme işlemi başarılı";
$json["resimUrl"] = $tam_url; // Resimimizin url'sini gönderiyoruz
}else
{
// Eğer dosya yükleme başarısızsa
$json["hata"] = "Yükleme işlmi başarısız";
}
}
// Json olarak çıktı gönderiyoruz
echo json_encode($json);
}
?>Burda dikkat etmemiz gereken nokta şu değerlerimizi json olarak geriye döndürüyoruz onun haricinde yaptığımız işlemler normal dosya yükleme işlemi . Şimdi bir tane dosya adında klasör oluşturalım ve deniyelim. Biz örnekte resim yüklemeyi gösterdik siz aynı işlemi diğer dosyalar içinde yapabilirsiniz mantık aynı.
Kolay gelsin 
Yorum yapmak için lütfen giriş yapın veya üye olun