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

WallpaperPlay | Ücretsiz HD Masaüstü ve Mobil Wallpaper Duvar Kağıdı

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

Yorum Yap

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...

  790   10 ay önce

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

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

  2882   1 yıl önce

Input Değerlerini Ön Belleğe Alma [ localStorage ]

Bir form doldurma esnasında tarayıcının yanlışlıkla veya herhangi bir hata sonucu kapanması...

  1540   1 yıl önce

Javascript İle Upload Öncesi Görselleri Önizlemek

Bir çok yerde elbet karşınıza çıkmıştır, bir fotoğraf yüklüyorsunuz ve seçtiğiniz and...

  2270   1 yıl önce

Engin Pala 2 hafta önce demiş ki;


Teşekkür ederim ben işe koyuluyorum o zaman :D
Yoruma Git

Engin Pala 2 hafta önce demiş ki;


Merhaba Emre bey döviz kurlarının sürekli değişmesi mümkün mü yani anlık olarak nasıl çe...
Yoruma Git

Misafir 2 hafta önce demiş ki;


hocam bilgi için teşekkürler
Yoruma Git

sadık ikinci 1 ay önce demiş ki;


Emre bey, sizin kodlar ile merkez bankasından döviz değeri çekip, sitede para birimi dönüştü...
Yoruma Git