Warning: curl_setopt() [function.curl-setopt]: CURLOPT_FOLLOWLOCATION cannot be activated when safe_mode is enabled or an open_basedir is set in /home/serpito/public_html/wp-content/plugins/amp-plus/amp-plus.php on line 200
jQuery: Upload Edilmeden Resim önizleme | - Demo Uygulama - Serpito | www.serpito.com - AMP tarafı | Hızlandırılmış Mobil Sayfa

jQuery:
Upload Edilmeden Resim önizleme | - Demo Uygulama - Serpito

jQuery: Upload Edilmeden Resim önizleme | - Demo Uygulama - Serpito | Quelle: www.serpito.com
jQuery: Upload Edilmeden Resim önizleme Posted on 20 Aralık 201320 Aralık 2013 by Atilla Akoğlu

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> 
Demo Download This entry was posted in Demo Uygulama, jQuery and tagged , , , , , , , , . Bookmark the permalink.
Baskı
Içerikten sorumlu:
www.serpito.com
AMP eklentisi aracılığıyla mobil sayfa:
amp-cloud.de
Gizlilik ve Kullanım Şartları:
www.serpito.com
AMP-Update:
31.05.2018 - 11:01:26