Fileupload Sırasında Resmi Yüklemeden Gösterme
4245 görüntüleme

Merhaba Arkadaşlar,

fileupload ile resim yüklerken resim seçildiği gibi yanında gösterme işlemini yapacağız.

çoğu sitede uzun uzadıya kodlarla yapılmış bunu daha kısa bir şekilde halledeceğiz. Bunun için öncelikle jquery kütüphanesini sayfamıza yükleyelim.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 

şimdi sayfaya bir fileupload ve bir boş image html yetleştirelim


        <input type="file">
      
        <img id="resim" width="100" height="100" />

 

şimdi sayfada bir resim uploatımız ve bir boş resmimiz var. normal şartlarda bir de butonumuzun olması gerekiyordu ve resmi yükle dediğimizde resmin veritabanına veya klasöre yazmamız daha sonra görmemiz lazımken biz daha yükle demeden seçilen resmi sayfada görmek istiyoruz.

bunun için  <input type="file" özelliğine ufak birşey yazacağız jquery sayesinde resmi yüklemeden görmemizi saylayacak.

kodumunuz yeni hali


        <input type="file" onchange="$('#resim')[0].src = window.URL.createObjectURL(this.files[0])">
      
        <img id="resim" alt="your image" width="100" height="100" />

hepsi bu kadar.. 

umarım işinize yarar.

bir sonraki yazıda görüşmek dileğiyle..

 


Bildiklerimizi paylaşıyoruz, bilmediklerimizi öğreniyoruz.
biz bunları yapıyoruz ya siz...
© 2016 Bildiklerimiz.Net Tüm hakları saklıdır.