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