JQuery ile Resmi upload etmeden önce önizleme



jQuery kütüphanesi kullanarak artık resim dosyalarımızı upload etmeden önce görüntülemek ( önizleme ) yapmak mümkündür.

jQuery ‘nin bize sağlamış olduğu kolaylıklardan faydalanmak ve projelerimize değer katmak için bugğn böyle bir uygulama yapalım ve daha sonra bunu geliştirelim.

örnek kodlar

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>jQuery - Resim önizleme</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
	
	.upload-preview{
		margin:0 auto;
		text-align:center;	
		border:none;
		height:200px;
		width:100%;
	}
	.upload-preview img{
		max-height:200px;
		padding:3px;
		border:1px solid #e2e2e2;
		
	}
	input.file{
		border:none;
		margin-top:20px;	
	}
</style>

</head>

<body>

<div class="clear"></div>

<div id="wrapper" align="center" style="width:980px; min-height:450px; margin-top:10px; font-family:museo-sans-500,helvetica,arial,sans-serif;">	
    	
<div id="container" style="width:940px; text-align:center;">

<div class="upload-preview">
  
</div>
<input class="file" value="Resim Seç" 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>
		</div>
	</div>		
    
</body>
</html>