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>