jQuery Resim Dosyalarını Upload Etmeden Önce Görüntülemek (önizleme) | Webien.Net: Webmaster Forumu
World Of Wars Türkiyenin Uzay Strateji Oyunu

jQuery Resim Dosyalarını Upload Etmeden Önce Görüntülemek (önizleme) (1 Kişi içerde)

Şu anda okunan
jQuery Resim Dosyalarını Upload Etmeden Önce Görüntülemek (önizleme) (1 Kişi içerde)

  • Güvenli Profil
  • Zeki

    Zeki  

    Wadmin
    arge
    Adı
    ZEKİ
    Soyadı
    AYGÜN
    Katılım
    18 Ocak 2019
    Konum
    Yalova
    Konular
    723
    Mesajlar
    2,811
    Beğeniler
    1,123
     /
    WBN+
    278
     Ticaret - 0%    
    0   0   0
      
    Site
    webien.net
    Meslek
    Webmaster & SEO
    Detay  
    Adı
    ZEKİ
    Soyadı
    AYGÜN
    Katılım
    18 Ocak 2019
    Mesajlar
    2,811
    Beğeniler
    1,123
    WBN+
    278
    Konum
    Yalova
    Site
    webien.net
     Ticaret - 0%
    0   0   0
     Ticaret - 0%
    Meslek
    Webmaster & SEO
    Tecrübe
    12 Yıl
    Uzmanlık alanları
    Web tasarım
    PHP
    SEO
    Seslendirme
    Video montajm
    İş referanslarım
    https://www.youtube.com/channel/UC0EKnd0EWBefw9Wrqw_wrAA
    Üyelik tipi
    1. Bireysel
    Enpara   Hesap
    ZEKİ AYGÜN
    HESAP NO; 1237-0056746
    ŞUBE: DOSAB BURSA
    İBAN: TR69 0004 6012 3788 8000 0567 46
    Enpara   Hesap
    ZEKİ AYGÜN
    HESAP NO: 497-6640783
    ŞUBE: GEMLİK
    İBAN: TR60 0006 2000 4970 0006 6407 83
    Photoshop   Photoshop
    1. Orta düzey
      50%
    İllüstratör   İllüstratör
    1. Başlangıç düzeyi
      30%
    İllüstratör   UI / UX tasarım
    1. İleri düzey
      90%
    PHP   PHP
    1. Orta düzey
      50%
    PHP   CSS3
    1. İleri düzey
      90%
    PHP   JavaScript
    1. Orta düzey
      50%
    Telegram bağlantısını yönlendirme
    teleg.run
    • Konuyu başlatan
    • Admin
    • #1
    jQuery kütüphanesi kullanarak artık resim dosyalarımızı upload etmeden önce görüntülemek ( önizleme ) yapmak mümkündür.
    örnek kodlar
    Kod:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>jQuery - Resim önizleme</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <style>
        
        .upload-preview{
            margin:0 auto;
            text-align:center;   
            border:none;
            height:200px;
            width:100%;
        }
        .upload-preview img{
            max-height:200px;
            padding:3px;
            border:1px solid #e2e2e2;
            
        }
        input.file{
            border:none;
            margin-top:20px;   
        }
    </style>
    
    </head>
    
    <body>
    
    <div class="clear"></div>
    
    <div id="wrapper" align="center" style="width:980px; min-height:450px; margin-top:10px; font-family:museo-sans-500,helvetica,arial,sans-serif;">   
            
    <div id="container" style="width:940px; text-align:center;">
    
    <div class="upload-preview">
     
    </div>
    <input class="file" value="Resim Seç" name="logo" type="file">
    
    <script type="text/javascript">
    
    $(document).ready(function(){
    var preview = $(".upload-preview");
    
    $(".file").change(function(event){
       var input = $(event.currentTarget);
       var file = input[0].files[0];
       var reader = new FileReader();
       reader.onload = function(e){
           image_base64 = e.target.result;
           preview.append("<img src='"+image_base64+"'/>");
       };
       reader.readAsDataURL(file);
      });
    });
    </script>
            </div>
        </div>       
        
    </body>
    </html>
     

    Bu konuya kimler baktı (Toplam: 2) Detayları gör

    Tips
    İpucu
    Benzer konular
    Başlatan Başlık Forum Cevaplar Tarih
    Zeki XenForo jquery'ye yükselt XenForo 0
    EVScreativ Satış EVScreativ | APP SMMPanel Creativ V2 HTML5, CSS3, jQuery Full Responsive (Mobil Uyumlu) Ücretli Tasarım Satışı 0
    EVScreativ Satış EVScreativ | APP SMMPanel Creativ HTML5, CSS3, jQuery Full Responsive (Mobil Uyumlu) Ücretli Tasarım Satışı 0
    EVScreativ Satış EVSCREATİV | CV PROFİL HTML5, CSS3, jQuery Full Responsive (Mobil Uyumlu) Ücretli Tasarım Satışı 0
    W jQuery Kod Örnekleri jQuery 0
    deserto Alış Resim Yükleme Sitesinde Footer Link Satışı Sosyal Link Borsası 3
    Tanıtım Resimlinki.com adresiyle artık resim yüklemek çok basit Web Site Tanıtım 0
    erencan İstek Depositphotos resim istemi Ücretsiz Grafik İstekleri 0
    ferdi Resim Paylaşım Scripti (Admin Panelli) Ücretsiz Scriptler 0
    Soner WordPress'te Resim Optimizasyonu WordPress 0
    kralmetin0606 Online Resim Düzenleme – Fotoğraf Düzenleyici Scriptleri Ücretsiz Scriptler 0
    Zeki CSS'de Resim Ovalleştirme HTML - CSS - XML 1
    Soner Php veritabanına resim yükleme PHP 4
    deserto Ücretsiz Resim Yükleme Sitesi - Free image hosting Web Site Tanıtım 5
    ferdi Ücretsiz PHP Resim Upload Scripti Ücretsiz Scriptler 0
    kralmetin0606 Online Resim Düzenleme – Fotoğraf Düzenleyici Scriptleri(Degerlendirin derim) Ücretsiz Scriptler 0
    kralmetin0606 Resim Upload Scripti Türkçe Bu Script Kaçmaz Ücretsiz Scriptler 10
    erencan Instagram video & resim indirme scripti (ücretsiz) Ücretsiz Scriptler 0
    jagapps Resim Yükleme Scripti Ücretsiz Scriptler 4
    tuncayalp Resim Upload Scripti (Geliştirmeye Açık) Ücretsiz Scriptler 0
    Zeki Resim Yükleme Servisimiz Hizmete Girmiştir Duyurular 2
    B OrakUploader – Ücretsiz Çoklu Resim Upload Scripti Ücretsiz Scriptler 1
    Zeki PLOTAVERSE Resim Efekt Programını Hem tanıyalım Hem İndirelim Fotoğrafçılık 0
    ferdi MASCODER RESIM Resim Upload Scripti Ücretsiz Ücretsiz Scriptler 2
    ferdi Resim Upload Scripti + Türkçe Dil (En İyisi) Ücretsiz Scriptler 1
    Zeki Php'de Resim Üzerine Yazı Yazdırma İşlemi PHP 0
    ferdi Instagram Resim ve Video İndirme Scripti Ücretsiz Scriptler 0
    deserto Google ile resim optimizasyonu SEO İpuçları 3
    M Jetresim.com - Ücretsiz resim yükleme ve barındırma servisi. Web Site Tanıtım 0
    I Ücretsiz resim yükleme ve barındırma servisi Web Site Tanıtım 0
    Kakashi Hızlı Resim Benzeri Fotoğraf Linki Elde Etme Sitesi - LinkPicture.com Web Site Tanıtım 0
    Kakashi En Hızlı Resim Linki Elde Etme Sitesi - LinkPicture.com Firma Dizinleri 0
    N Jpg, png ve gif formatında resim yükleme sitesi Web Site Tanıtım 0
    N En iyi resim sıkıştırma programı Web Site Tanıtım 0
    kurumsalshop Instagram video & resim indirme scripti (ücretsiz) Ücretsiz Scriptler 0
    A Sosyal Fotoğraf Paylaşım Scripti – Resim Paylaşım Scripti Ücretsiz Scriptler 0

    Benzer konular

    Üst