jQuery ile dinamik çoklu dosya yükleme inputları oluşturmak (eklentisiz)

Senaryomuz şöyle: Bir formumuz var ve kullanıcıların bu form aracılığıyla sonsuz sayıda dosya yüklemelerini sağlamak istiyoruz. Bunun için form içinde dinamik olarak dosya yükleme inputları oluşturmamız, fazladan oluşturulanları kaldırabilmemiz gerekiyor. Feysbuk’ta, bazı WordPress eklentilerinde ve daha başka bir çok yerde, çeşitli amaçlar için bu uygulamanın yapıldığını gördük. Şimdi jQuery maharetiyle olabilecek en basit biçimde bu işin nasıl yapılabileceği konusunda fikir sahibi olacağız.

Aslında yapacağımız şey teknik olarak “oluşturmak” değil “çoğaltmak” olacak. İşe öncelikle basit bir dosya yükleme formu hazırlayarak başlıyoruz

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- form -->
<form action="" method="post" enctype="multipart/form-data">

    <!-- files -->
    <div id="files">

        <div class="row">
            Dosya seçiniz
            <input type="file" name="file[]" class="file">
            <a href="javascript:void(0);" class="add">+ Ekle</a>
        </div>

    </div>
    <!-- //files -->

    <input type="submit" class="submit" value="Dosyaları Yükle">

</form>
<!-- //form -->

jQuery ile ilgili olan tüm çalışmalarımızda olduğu gibi kütüphaneyi, sayfanın </head> etiketinden önce çağırıyoruz. Yeni moda akım bize sayfamızın daha hızlı açılması için özellikle js kütüphanelerini sayfanın sonunda, mümkünse </body> etiketinden önce çağırmamız gerektiğini öğütlüyor ancak ben yıllardır sahip olduğum bu alışkanlıktan vazgeçemiyorum. Böylesi benim için daha nizami oluyor. Ayrıca bu çalışmada jQuery’yi kendi bulutundan çağırdım fakat sizler isterseniz şuradan indirip lokal olarak da çağırabilirsiniz.

1
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

Geliyoruz tüm işimizi yapacak olan, yine </head> etiketinden önce ekleyeceğimiz jQuery kodlarımıza.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script type="text/javascript">
$(document).ready(function(){

    // Ekleme düğmesine tıklandığında
    // Düğmeye tıklamak yerine dosya seçildiği zaman işlem yapılmasını istiyorsanız
    // şu ifadeyi kullanabilirsiniz: $(document).on("change", ".file", function(){
    $(document).on("click", ".add", function(){

        // Klonlamak için formun ilk öğesini tanımla
        var row = $("#files .row:first-child").clone();

        // "kaldır" linki ekle, "ekle" linkini kaldır
        row.append('<a href="javascript:void(0);" class="remove">- Kaldır</a>')
           .find(".add").remove();

        // Klonu ekle
        $("#files").append(row);

    });

    // Kaldır
    $(document).on("click", ".remove", function(){
        // Kaldır
        $(this).parent(".row").remove();
    });

}); //doc ready end
</script>

Kodlarımızı Türkçeye çevirecek olursak, sırasıyla şu şekilde konuştuklarını görebiliriz:

Ekleme İşlemi

  1. .add classı atadığımız +Ekle düğmesine tıklandığı zaman çalış. (Opsiyonel olarak buton kullanmadan, dosya yükleme inputu değiştiği zaman çalışmak gibi bir alternatif de bulunuyor)
  2. #files id’li, inputların anası konumundaki div’in içinde bulunan, .row classlı “ilk” dosya yükleme divinin bir klonunu oluştur
  3. Oluşturulan klonun içine – Kaldır linkini ekle ve içindeki + Ekle linkini kaldır. (Bu linkin tekil olmasını istiyoruz)
  4. Hazır olan klonu #files id’li ana divin en sonuna ekle

Kaldırma İşlemi

  1. .remove classlı – Kaldır linkine tıklandığı zaman, onun ebeveyni olan .row classlı klonu tüm içeriğiyle birlikte kaldır

Basit değil mi? Basit basit. Yalnız şunu unutmamak lazım, .add classlı ekleme linkine tıklamak yerine dosya yükleme inputu değiştiği zaman işlem yapmak isterseniz işin içine farklı kontroller girmesi de gerekebilir. En basitinden her yeni dosya seçildiğinde #files id’li div’e yeni bir klon eklenecektir. Aklınızın bir köşesinde bulunsun.

Aşağıda yer alan demo linki aracılığıyla örnek uygulamayı inceleyebilir, konu hakkında daha detaylı fikir sahibi olabilirsiniz. Ayrıca “Hacı abi şu şu iş için de örnek bir uygulama olsaydı tadından yenmezdi” diye düşündüğünüz konular olursa paylaşın, bilgim ve vaktim müsade ettiği ölçüde yardımcı olmaya çalışırım.

Demo

İlginizi Çekebilecek Diğer İçerikler

Facebook Yorumları

2 Yorum

Uyarı: Yorumlarda link kullanmayınız. Link içeren yorumlar otomatik olarak spam kabul edilmektedir.

Bir cevap yazın

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