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.
