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

Demoyu Buraya tıklayarak inceleyebilirsiniz.