Javascript İle Upload Öncesi Görselleri Önizlemek  Javascript İle Upload Öncesi Görselleri Önizlemek | Googleda Görüntüle

Javascript İle Upload Öncesi Görselleri Önizlemek
 BEĞEN
  YORUM YAP

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.

Etiketler

Yorumlar

Bu Konuya Ait 1 Onaylı Yorum Bulunuyor.

Çılgın Koder

Çılgın Koder

  1 yıl önce

Bunu çoklu resimlerde nasıl yapacağız? Ve limit koymak istesek nasıl koyarız.

Yorum Yap

CSS3 -webkit / -moz / -o Nedir ? CSS3 ve Tarayıcı İlişkisi

Belki daha önce karşılaşmız olabilirsiniz.Bazı CSS3 kodları birkaç defa aynı yazılıp baş...

  3915   1 yıl önce

CSS3 Geçiş Efektleri - Transition Nedir? Nasıl Kullanılır?

Merhaba arkadaşlar, çoğu sitelerde gördüğümüz daha yumuşak ve animasyonlu şekilde geçiş ...

  2568   1 yıl önce

3. İndir.com Mobil Uygulama Yarışması ABD'ye Götürüyor

İNDİR.COM MOBİL UYGULAMA YARIŞMASI ABD’ YE GÖTÜRÜYOR Geçtiğimiz ik...

  1771   2 yıl önce

CSS [ text-transform:uppercase ] Karakter Sorunu Çözümü

Css'de metin (text) biçimlendirme özelliklerinden biri olan text-transform:uppercase parametresini...

  5650   2 yıl önce

Olcay E. 5 ay önce demiş ki;


selamun aleyküm, yararlı bir css dersi
Yoruma Git

erhan tapan 11 ay önce demiş ki;


Siteyi coşturan kod erhan bunu beğendi
Yoruma Git

Nejdet Acar 1 yıl önce demiş ki;


Okumadan hemen cevaba sarılmayalım lütfen, okuyanlara ayıp oluyor...
Yoruma Git

Çılgın Koder 1 yıl önce demiş ki;


Bunu çoklu resimlerde nasıl yapacağız? Ve limit koymak istesek nasıl koyarız.
Yoruma Git