Krajee Fileinput Kullanımı – Php de Çoklu Resim Yükleme

Krajee Fileinput Plugini ile php dosyanıza çoklu resim yükleme işlemi giriş

Merhaba Arkadaşlar, arayüzünü beğendiğim ve kendi php projemde çoklu resim yükleme işlemi için uyguladığım bir plugin paylaşacağım sizlerle. Bu pluginden önce ismini birçok platformda duyduğum dropzone pluginini denemiştim ancak Krajee Fileinput plugini çok daha kullanışlı ve daha şık, öyleyse Krajee Fileinput Kullanımı – Php de Çoklu Resim Yükleme dersimize başlayalım.

Bir eticaret sitesi tasarladığınızı düşünelim, resim ekleme işlemini yapacağınız dosyanız urunekle.php olsun.

Öncelikle Kartik in sitesini ziyaret edip dosyaları projemize entegre edeceğiz. Fileinput jquery ile çalışmakta, jquery i eklemediyseniz indirmek için https://jquery.com/download/ tıklayınız.

1.YÖNTEM:

Krajee Fileinput kullanımında 1.yöntem & Php

https://plugins.krajee.com/file-input ziyaret ederek sağ üst köşedeki source a tıklayarak dosyaları bilgisayarınıza indirin. İndirdiğiniz rar dosyasını arşivden çıkarın ve fileinput.min.css , LANG.js , fileinput-rtl.min.css(dosyalar sol baştan değil de sağ baştan sıralansın istiyorsanız ekleyin) , fileinput.min.js , fas/theme.min.js sayfanıza (urunekle.php) ekleyin.

2. YÖNTEM:

fileinput kullanımında 2.yöntem

Dosyaları indirmenize gerek kalmadan uygulamayı sitenize entegre etmek için https://plugins.krajee.com/file-input#usage ziyaret edin ve listedeki linkleri kopyalayıp belirtildiği şekilde sayfanızın (urunekle.php) head tagları arasına yapıştırın.

Şimdi de dosyanızda (urunekle.php) fileinput u yerleştirmek istediğiniz div tagları arasına; <input id=”input-id” type=”file” class=”file” data-preview-file-type=”text”> inputunu yapıştırın.

Fileinput u çalıştırmanız için son aşamaya geldik, dosyanızın (urunekle.php) son satırında <script></script> taglarını bu şekilde yazın ve taglar arasına aşağıdaki kodları yapıştırın ;

$("#input-id").fileinput();
$("#input-id").fileinput({'showUpload':false, 'previewFileType':'any'});

Kodlarınızı kaydedip sayfayı yenilediğinizde fileinput un görüntüsü bu şekilde olacaktır.

fileinput un görünümü

Fileinput u bu aşamada çalıştırmış olmanız gerekmektedir.Bundan sonraki dersimizde fileinputu Türkçeleştirecek, iconlar için tema düzenlemesi yapacak, max – min dosya sınırlaması belirleyecek ve uzantı filtreleme işlemlerini yapacağız.

Takıldığınız yerler olursa yorum kısmına yazınız.

Diğer yazılarımız için buraya tıklayınız.

Bir cevap yazın

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