"Enter"a basıp içeriğe geçin

Jquery ile Resim Yüklerken Önizleme Alma

Projenize resim yada fotoğraf ekleyecek olabilirsiniz. Ekleme işlemi yapmak için, file tipindeki inputu sayfaya eklediğinizi varsayalım. Bu inputa dosyayı eklediğinizde, sadece dosya yolunu görebilirsiniz, eklenen resmin yada fotoğrafın önizlemesini göremezsiniz. Eğer input ile resim yada fotoğraf eklediğinizde, görüntünün önizlemesinide görmek istiyorsanız bunun için; iki yöntem var. Ya önizleme bölümünü kendiniz kodlarsınız yada hali hazırdaki kütüphanelerden birini projenize dahil edersiniz.

Bu yazıda dropify kütüphanesini proje ekleyerek, eklenen resim yada fotoğrafın önizlemesini ekranda nasıl gösteririz bunu göreceğiz.

https://github.com/JeremyFagis/dropify adresine giderek kütüphaneyi indirin.

Dosya içerisindeki dropify.min.css, dropify.min.js ve font dosyasını projenize dahil edin.

Js dosyasının altına aşağıdaki kodu ekleyerek kütüphanenin çalışmasını sağlayın.

$(document).ready(function(){
    $('.dropify').dropify();
});

Yukarıda belirtilen kütüphaneleri projenize dahil ettikten sonra artık aşağıdaki kodu projenizde istediğiniz bölüme ekleyerek kullanabilirsiniz.

<input type="file" class="dropify">

Ayrıca varsayılan olarak belirtilmiş mesajları değiştirebilirsiniz. Bunun için aşağıdaki kodları js dosyasının hemen altına yada dropify.min.js dosyasını açıp en alt kısma aşağıdaki kodları ekleyebilirsiniz.

$(document).ready(function () {
    $('.dropify').dropify({
        messages: {
            'default': 'Buraya bir dosya sürükleyip bırakın veya tıklayın',
            'replace':'Değiştirmek için sürükleyip bırakın veya tıklayın',
            'remove': 'Kaldır',
            'error': 'Maalesef bu dosya çok büyük'
        }
    });
});

Eklenti ile anlatacaklarım bu kadar arkadaşlar. Daha detaylı bilgi edinmek için yukarıda belirttiğim linke tıklayabilirsiniz.

Yazıyı Paylaşmak İster misin?
Share on Facebook
Facebook
Pin on Pinterest
Pinterest
Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin
Share on Tumblr
Tumblr
Share on Reddit
Reddit
    Bir cevap yazın

    E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir