Bir çok yerde elbet karşınıza çıkmıştır, bir fotoğraf yüklüyorsunuz ve seçtiğiniz anda önizlemesinin hemen karşınıza çıkması.Bu fotoğrafın boyutu ne olursa olsun, herhangi bir süreye tabi tutmadan direkt bu işlem gerçekleşir.
Bu işlemi Javascript'in FileReader api'si ile yapıyoruz.Şimdi işlemin nasıl yapılabileceğini sizlere göstermek istiyorum.
NOT: IE 10 ve üzeri destekliyor.
HTML KODU
CSS KODU
#preview {display: none;} .display {display: block !important;}
JAVASCRIPT KODU
function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); $( "#preview" ).addClass( "display" ); reader.onload = function (e) { $('#preview').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } } $("#imgup").change(function(){ readURL(this); });
Basit bir şekilde yukarıda ki kodda gösterdim.Siz isteğinize göre bunu geliştirip biçimlendirebilirsiniz.
NOT: Css vermemin sebebi herhangi bir görsel seçim yapmadan önce bozuk veya görsel yok simgesi çıkmaması için.Demoyu Buraya tıklayarak inceleyebilirsiniz.
Çılgın Koder
5 yıl önceBunu çoklu resimlerde nasıl yapacağız? Ve limit koymak istesek nasıl koyarız.