Jquery Resim Yüklerken önizleme Alma - FileReader
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 Resim Yüklerken önizleme Alma - FileReader

profil
cArleone
BEĞEN(0)
BEĞENME(0)
GÖRÜNTÜLENME(2849)
RAPOR ET
Bu dersimiz de javascript ve jquery karışık olarak,resim yükleme için seçilen resmin önizlemesini almayı göstereceğim.Bunun için FileReader apisini kullanıyoruz.Adından anlaşılacağı gibi FileReader dosya verilerini okuyor.Biz de bu sayede resim verisini okuyup bir img tagı için de bastıracağız.

İncele : http://ustaderslik.com/ornek/FileReader/

İndir : http://ustaderslik.com/dosya/FileReader.rar

Genel örnek :
<!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(){//eğer file değişirse
var resim=document.getElementById ("resim");//resime eriş

if (resim.files && resim.files[0]){//eğer dosya var ise
var veri=new FileReader();//veri okuma apisi başlatıyoruz.
veri.onload=function() {//altta readAsDataURL verileri okuyoruz.O okuma tamamladığın da
var adres=reader.result;//veriyi al
$('.onizleme').html('<img src="'+adres+'"/>');//resim olarak çizdir.
}

veri.readAsDataURL(resim.files[0]);//veri okuma
}
});

})
</script>
</head>
<body>

<input type="file" id="resim" />
<div class="onizleme"></div>

</body>
</html>

Yukarı da açıklama yaptım ama bir de burada anlatayım.Öncelikle files kullanımını öğrenelim. http://ustaderslik.com/konu/JavaScript_Dosya_Yükleme_Verilerini_Alma_-_files

Jquery change ile dosya seçimini yakalıyoruz.
Javascript ile file ye erişip içerik var mı kontrol ediyoruz.
Eğer var ise FileReader apiyi oluşturuyoruz.
Daha sonra readAsDataURL ile içeriği okuyoruz.
Okuma bittiğin reader.result içeriği alıp işlem yapıyoruz.



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