JQuery ile Resmi upload etmeden önce önizleme

23 Mayıs 201923 Mayıs 2019 admin jquery prewiev, resim upload, upload etmeden resmi ö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>

Videolu Örnekler için Tıkla

Bunu paylaş: