jQuery: Upload Edilmeden Resim önizleme

jQuery ile gelen nimetlerden birini daha bugün inceleyelim. Form kullanarak upload edeceğimiz görsel dosyaları sunucuya yollamadan önce preview (önizleme) jQuery kodları ile mümkün. Kullanılabilirlik ve kolaylık için ziyaretçilerinize sunabilirsiniz. 
Formun file element değeri her değiştiğinde çalışan bu kod bloğu seçilen resimin local adresini ele alarak sayfada gösteriyor.
Demo uygulamanın kodları da bu mantık kadar basit aslında. Uygulamanın çalışan demosunu ve kaynak kodlarını yazının altında bulabilirsiniz.
Uygulama kodlarına geçelim; 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

 

<div class="upload-preview">

 

</div>

<input class="file" name="logo" type="file">

 

<script type="text/javascript">

 

$(document).ready(function(){

var preview = $(".upload-preview");

 

$(".file").change(function(event){

var input = $(event.currentTarget);

var file = input[0].files[0];

var reader = new FileReader();

reader.onload = function(e){

image_base64 = e.target.result;

preview.append("<img src='"+image_base64+"'/>");

};

reader.readAsDataURL(file);

});

});

</script>

 

http://www.serpito.com/jquery-upload-edilmeden-resim-onizleme/