9 Özel Açık Kaynak Dosya Yükleme Alanı Parçacıkları

UI kitlerinden gelişmiş jQuery eklentilerine kadar web formlarını geliştirmek için harika araçlar bulabilirsiniz.

Ancak düzenlenmesi en zor girdi alanlarından biri yükleme alanıdır. Bu, varsayılan bir HTML giriş öğesidir ve kullanıcıların bilgisayarlarından dosya yüklemesine olanak tanır. Yükleme alanını yeniden biçimlendirmek, diğer form öğelerine kıyasla çok büyük bir zorluktur.

Yükleme girdilerinizi özelleştirmeyi umuyorsanız, bu galeri size yardımcı olacaktır. Alanı istediğiniz gibi görünecek şekilde yeniden şekillendirebileceğinizi kanıtlayan CodePen'den 9 adet el yapımı yükleme alanı topladım.

1. Düz Dosya Yükleme

Geliştirici Wallace Erick, bu düz yükleme alanını biraz CSS ve JavaScript ile oluşturdu. Tek renklere odaklanarak gradyanları önleyen düz tasarım trendini ödünç alır - genellikle tek renkli bir renk şemasıyla.

Bu dosya yükleme tasarımını herhangi bir sayfaya ekleyebilir ve harika görünmesini sağlayabilirsiniz. Tek yapmanız gereken renk düzenini değiştirmek ve onu formunuza uygun şekilde yerleştirmek.

Tam beklediğiniz gibi çalışır ve standart HTML giriş öğesinde çalışır. Dolayısıyla bu, eski tarayıcılarda da kullanılabilir ve mobil cihazlarda da çalışması gerekir.

2. Özel Dosya Yükleme

İşte yükleme alanıyla biraz daha soyut hale gelen bir tasarım. Geliştirici Aaron Vanston, bu dosya yüklemesini daha büyük web sitelerinde gördüklerimizin bir kopyası olarak oluşturdu.

Dropbox, Google+ ve Facebook gibi büyük teknoloji sitelerini düşünün. Genellikle, yükleme penceresini başlatmak için büyük bir "buraya tıklayın" alanına sahip bir sürükle ve bırak alanına sahiptirler. Aaron'ın bu snippet ile yaptığı tam olarak buydu.

Çalışmak için jQuery'ye ve iyi miktarda JS/CSS'ye güveniyor. Standart HTML giriş alanını kullanırken, özel JS işlevleriyle yükleme işlemini de gerçekleştirir.

JavaScript'i nasıl kullanacağınızı biliyorsanız, bu, kendi dosya yükleme kullanıcı arayüzünüzü oluşturmak için kullanışlı bir şablon olarak işe yarayabilir.

3. Duyarlı Animasyonlu Yükleyici

Herhangi bir modern web tasarımı yapıyorsanız, duyarlı olmanız gerektiğini bilirsiniz. Mobil kullanıcılar, aynı formlar aracılığıyla web'e dosya yükleyebilir, bu nedenle duyarlı bir giriş alanı kullanmak harika bir fikirdir.

Kaliteli bir mobil uyumlu yükleme alanı örneği için bu tasarıma bir göz atın. Sürükle ve bırak desteği ile sadece küçük bir kare yükleme alanı ile çok basit.

Bunun giriş öğesini kullanmadığını unutmayın - bu nedenle yüklemek için tıklamanın bir yolu yoktur. Bunun bir kullanılabilirlik kabusu olduğunu düşünüyorum, ancak bu aynı zamanda test için kullanılan örnek bir pasajdır - bu nedenle mükemmel kullanılabilirliğe yönelik değildir.

Bu parçacığı sitenize getirirseniz, sürükle ve bırak alanının yanına tipik bir yükleme alanı eklemeniz önerilir.

4. Özel Yükleyici

Günlük geliştirme projeleri, becerilerinizi geliştirmenin harika bir yoludur. Drew Vosburg, CodePen'de ücretsiz olarak barındırılan tatlı bir yükleme formu oluşturmak için bu yaklaşımı izledi.

Sürükle ve bırak efektini işleyen JavaScript işlevleriyle büyük ölçüde özelleştirilmiştir. Ancak bu giriş alanı, sürükle ve bırak ile birlikte hem dokunma hem de tıklamayı desteklemek için oluşturulmuştur.

Tıklanabilir alan, CSS ile stillendirilmiş bir HTML etiketidir. Bu etiket öğesi, sayfanın dışında gizlenen giriş alanına eklenir. Tıpkı tıklanabilir bir alan gibi çalışır. Kesinlikle akıllı bir fikir ve önyüklemesi tamamen anlamsal.

5. Stok Fotoğraf Yükleme Arayüzü

İşte CodePen'de gördüğüm en karmaşık, ancak etkileyici parçacıklardan biri. Doğrudan bilgisayarınızdan bir galeriye fotoğraf yüklemenizi sağlar. Yüklediğiniz her fotoğrafla birlikte, sayfada size bir önizleme gösterecektir.

Görüntüleri JavaScript aracılığıyla çekerek ve ardından bunları CSS'ye gömmek için base64'e dönüştürerek çalışır.

Görüntüleri bir sunucuya yüklediğinizde, geçici bir dosya oluştururlar. Kendi sunucunuzda, resmi görüntülemek için bu geçici dosyayı kullanabilirsiniz. Ama artık CSS base64'ü desteklediğine göre, bu başka bir alternatif.

Arayüz süper temiz ve yükleme özelliği hemen karışıyor.

6. Basit Mavi Yükleme Arayüzü

JS içermeyen bir yükleme alanı arıyorsanız, Stephen Baker tarafından oluşturulan bu örneğe bir göz atın.

Giriş stilini tek bir büyük düğmeye dönüştürmek için saf CSS3 kullanır. Font Awesome yükleme simgesiyle çalışır ve yükleme alanının etrafını tamamen dairesel bir alanı sarar.

Bunu sitenizle eşleştirmek için stili, rengi, simgeyi veya başka herhangi bir şeyi değiştirebilirsiniz. Temelde varsayılan giriş stiline süper temiz bir alternatiftir ve saf CSS3 üzerinde çalışır.

7. jQuery Özel Dosya Yükleme Girişi

Geliştirici Terry Young, biraz jQuery aldı ve mevcut bazı yükleme alanlarını geliştirmek için kullandı. Sonuç budur (ve eğer söyleyebilirsem, bu bir sonuçtur).

Bu stiller aracılığıyla, yükleme alanı metnini, boyutunu, düğme rengini değiştirebilir veya yalnızca tek bir düğme kullanmak için metin alanını kaldırabilirsiniz.

Bu özelliklerin çoğu CSS ile değiştirilemediğinden, bunun iyi miktarda jQuery gerektirdiğini unutmayın. jQuery ile çalışmanın sakıncası yoksa, bu seçenekler olağanüstü.

8. Düz UI Giriş Dosyası

İşte Geoffrey Crofte tarafından oluşturulan biraz farklı bir düz yükleme alanı. Bu aynı zamanda bazı JavaScript'lere dayanır, ancak tüm girdiyi CSS3 özellikleriyle biçimlendirir.

Bu örnek bir snippet olduğundan, dosyaları hiçbir yere yükleyemezsiniz. Ancak, bunu kendi sitenize taşırsanız değiştirmek yeterince kolaydır. Temel tasarım ve kurulum, bu parçaya gerçekten hayat veren şeydir.

Dönüş işlevi JavaScript'te çalışır, bu nedenle dosya yüklemelerini, ekrandaki değişiklikleri veya başka herhangi bir şeyi burada halledersiniz.

Hepsinden iyisi, bu kodlar IE 8'e kadar uzanan tarayıcılarda çalışır! Bu nedenle, erişilebilirlik konusunda endişeleriniz varsa oldukça sağlam bir seçenek.

9. Çoklu Yükleme Alanları

İşte bir bükülme ile son bir özel alan: Estetik olarak oldukça basit görünüyor - ancak asıl ödül işlevsellik.

Bu yükleme alanı, aynı anda birden fazla dosyayı destekleyecek şekilde tasarlanmıştır. Bunu genellikle giriş alanlarıyla görmezsiniz - veya en azından varsayılan olarak. Kullanıcılar aynı pencerede birden fazla dosya seçmelidir ve arka ucun bunu desteklemesi gerekir.

Bu snippet ile tüm dosya adlarını tek bir yükleme alanında listeleyebilirsiniz. Bu dosya adlarını düz görünümde sayfanın başka bir yerine eklemek için JavaScript'i bile kullanabilirsiniz.