Merhaba arkadaşlar. Uzun bir aradan sonra(yaklaşık 4 ay) ilk makalemi yazıyorum. Umarım yararlı bir yazı olur. Bu makalemde sizlere görsel yükleme sırasında kullanıcının input file ile bilgisayarından seçmiş olduğu görseli daha yükleme yapmadan web sayfamızda göstermeyi anlatacağım. Öncelikle html kodlarımızla sayfa yapımızı oluşturacağız.
<html>Yukarıda sayfa yapımızı oluşturduk. Dosya seçmemiz adına file ve resmi önizlemek için resimonizle adında bir div oluşturduk. Şimdi javascript kodlarımıza geçelim.
<head>
<title>Yazılım Günlüğü</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
//buraya birazdan yazacağımız javascript kodlarımız gelecek.
</script>
</head>
<body>
<form action="gorselyukleme" method="POST">
<input type="file" id="dosya" /></form>
<div class="resimonizle"></div>
</body>
</html>
$(function(){
$("#dosya").change(function(){
var dosya=document.getElementById ("dosya");
if (dosya.files && dosya.files[0]){
var veoku=new FileReader();
veoku.onload=function() {
var adres=veoku.result;
$('.resimonizle').html('<img height="250" src="'+adres+'"/>');
}
veoku.readAsDataURL(dosya.files[0]);//veri okuma
}
});
})Change bir objenin içeriği değiştiğinde yakalamamızı sağlayacaktır. Örnek olarak bir resim seçildi ve sayfada görüntülendi. Sonra resmi değiştirmek adına aynı file'dan başka bir resim seçtiğinde web sayfasında yeni seçtiğin görselin görünmesini sağlar. Sonraki satırda görsele id'si aracılığı ile erişiyoruz ve bir değişkene aktarıyoruz. İf ile görsel seçilip seçilmediğini kontrol edip seçildiyse veoku adında bir nesne oluşturuyoruz. Veriler okunup adres değişkenine aktarılıyor. Sonrasında resimonizle class değerine sahip dive görüntü gönderiliyor. ReadAsDataURL bir file veya blob nesnesini almaya ve URL verisinde işlemeye yarar. Yararlı olması dileğiyle... 
0 Yorum