Ücretsiz ES5 / ES6 JavaScript Dosya Yükleme Eklentisi - Uppy

Tasarıma en zor form girdilerinden biri dosya yükleme. Varsayılan bir HTML stiline sahiptir, ancak dünyadaki en güzel şey değildir..

uppy ile dosya yüklemelerini yepyeni bir seviyeye getirir. özel arayüz ve bir dinamik Ajax tarzı yükleme işlemi.

O ES5 / ES6 kodunda çalışır, böylece web uygulamalarınızı en yeni JavaScript standartlarına göre oluşturabilirsiniz. Ve hatta bulut depolama sitelerinden dosya yüklemelerini destekler Dropbox veya Google Drive gibi, yani çok yönlü dosya yükleme komut dosyası web için.

Uppy tamamen ücretsiz ve açık kaynaklı, GitHub'da bir repo ile. Ancak, bu eklentiyi kurmanın en kolay yolu npm veya İplik'tir; gerçek bir paket gibi çalıştır.

Web sitenize eklenen dosyaları aldıktan sonra, sadece Uppy.js dosyasını ve CSS kodunu ekleyin. Ardından, istediğiniz giriş alanını hedeflersiniz ve Uppy gerisini halleder.

Bu benzersiz bir arayüze sahiptir büyük bir kare yerleşimi gibi görünüyor Dosyaları sürükleyip bırakmak için Ayrıca sabit sürücünüzden öğe seçin ya da harici URL’lerden uzaktan dosya yükleme. Oldukça çılgın!

Tüm kurulum işlemini dokümantasyon sayfasında bulabilirsiniz, ancak ECMAScript 6'nın en azından biraz anlaşılmasını gerektirir.. Bu kütüphane kod yazmanın geleceğine bakıyor ve saf vanilya JavaScript ile kullanmak en kolay şey değil.

Ancak, web geliştirme konusunda ciddiyseniz, yine de ES6'yı öğrenmeye değer. Bulabilirsin çevrimiçi kaynak ton kendi kendine öğretim için ve hatta Uppy'yi ilk dersin olarak kullanabilirsin “gerçek” dalma ve öğrenmeye başlama projesi.

Gösterge Tablosu Örneği'ne göz atın Uppy'yi çalışırken görün. Bu sayfa için yükleme tetikleyici düğmesinin arkasında gizli, modal yükleme alanını görüntülemek için düğmeyi tıkladığınızda.

Buradan, resim yüklemek isteyip istemediğinizi seçebilirsiniz bilgisayarınızdan, web'den veya hatta web kameranızdan!

Örnekler sayfası, bir de dahil olmak üzere gözden geçirilmesi gereken bir demet sunar. sürükle ve bırak örneği, ile birlikte uluslararası demo sayfası.

Ancak, bunun nasıl çalıştığını gerçekten öğrenmek için, dokümanları gözden geçirmenizi ve ana GitHub deposuna göz atmanızı öneririm. Düşüncelerinizi Twitter'daki yaratıcılarla da paylaşabilirsiniz (@transloadit).