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>