Bu dersimiz de
jquery nin ajax methodu olan post ile resim yüklemeyi işleyeceğiz.Bu özelliği kullanabilmek için javascript'in
FileReader apsini kullanacağız.Filereader dosya verilerine erişmemize yarar.Daha önceden
http://ustaderslik.com/konu/Jquery_Resim_Yüklerken_önizleme_Alma_-_FileReader burada anlattım.Örnek olarak önizleme almıştık.Bu derste ise o veriyi ajaxla yollayıp,php ile resim olarak kayıt edeceğiz.
İndir : http://ustaderslik.com/dosya/Jquery-Ajax-Dosya-Yukleme.rar
Şimdi örneğe geçelim.Açıklamaları örnek üzerinde yaptım.
Genel örnek :
index.php
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("#resim").change(function(){//her hangi bir şey seçilirse
var resim=document.getElementById ("resim");//resime eriş
if (resim.files && resim.files[0]){//veri var mı kontrol ediyoruz.
var veri=new FileReader();//apiyi başlatıyoruz.
veri.onload=function() {//aşağıda dosya verisini okuyoruz.Eğer veri okunmuşsa
var resimveri=veri.result;//veriyi al
$.post("kayit.php",{"veri":resimveri},function(resim){//kayit.php yolluyoruz.
$(".resim").html('<img src="'+resim+'" />');//kayit php den dönen veri ile resimi çizdiriyoruz.Geri dönen veri resim urlsi.
})
}
veri.readAsDataURL(resim.files[0]);//veriyi okuyoruz.
}
});
})
</script>
</head>
<body>
<input type="file" id="resim" /> <br />
<div class="resim"></div>
</body>
</html>
kayit.php
<?php
if(isset($_POST["veri"])){//veri gelmişse
$veri=$_POST["veri"];//veriyi al
$isim=rand().".png";//rasgele isim oluşturuyoruz.
touch($isim);//dosyayı oluşturuyoruz.
$oku=file_get_contents($veri);//gelen verinin konumuna gidiyoruz ve veriyi alıyoruz.
file_put_contents($isim,$oku);//veriyi oluşturduğumuz resmin içine yazıyoruz.
echo $isim;//yeni resim konumunu yazdırıyoruz.
}
?>
Bu şekil de resim seçildiğin de veriyi jquery ajaxla yollayıp kayıt ediyoruz.Ben örnek uzamasın diye kontrol yapılarına girmedim.Artık siz,seçilen dosyanın resim olup olmadığını,boyutu,formatını vs kontrol edebilirsiniz.