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=veri.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.
UstaDerslik
