Jquery Ajax ile Resim Dosyası Yükleme
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

Jquery Ajax ile Resim Dosyası Yükleme

profil
cArleone
BEĞEN(0)
BEĞENME(0)
GÖRÜNTÜLENME(3518)
RAPOR ET
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.



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol