Plugin Muat Naik Fail JavaScript ES5 / ES6 - Uppy

Salah satu input bentuk yang paling rumit untuk mereka bentuk ialah fail dimuatnaik. Ia mempunyai gaya HTML lalai, tetapi ia bukan perkara tercantik di dunia.

Uppy mengambil muat naik fail ke tahap keseluruhan dengan a antara muka tersuai dan a Proses pemuatan gaya ala Ajax.

Ia berjalan pada kod ES5 / ES6, jadi anda boleh membina aplikasi web anda dengan piawaian JavaScript terkini. Dan, ia juga menyokong muat naik fail dari laman penyimpanan awan seperti Dropbox atau Google Drive, jadi ia adalah skrip muat naik fail beragam untuk web.

Uppy adalah sepenuhnya percuma dan sumber terbuka, dengan repo di GitHub. Walau bagaimanapun, cara paling mudah untuk memasang plugin ini adalah melalui npm atau Benang, supaya anda boleh jalankan seperti pakej yang sebenar.

Sebaik sahaja anda mendapatkan fail yang ditambahkan ke laman web anda, anda hanya termasuk fail Uppy.js dan kod CSS. Kemudian, anda menyasarkan bidang input yang anda inginkan dan Uppy menjaga selebihnya.

Ia mempunyai antara muka yang unik kelihatan seperti satu penempatan persegi besar untuk seret & lepaskan fail. Anda juga boleh pilih item dari pemacu keras anda atau bahkan memuat naik fail dari jauh dari URL luaran. Cukup gila!

Anda boleh mencari keseluruhan proses persediaan pada halaman dokumentasi, tetapi ia tidak memerlukan sekurang-kurangnya pemahaman tentang ECMAScript 6. Perpustakaan ini melihat masa depan skrip dan bukanlah perkara yang paling mudah digunakan dengan JavaScript vanila tulen.

Tetapi, jika anda serius tentang pembangunan web, ia patut belajar ES6 anyways. Awak boleh cari tan sumber dalam talian untuk pengajaran diri dan anda juga boleh menggunakan Uppy sebagai yang pertama “sebenar” projek menyelam & mula belajar.

Lihat Contoh Dashboard kepada lihat Uppy dalam tindakan. Untuk halaman ini, yang muat naik tersembunyi di sebalik butang pencetus, di mana anda klik butang untuk memaparkan bidang muat naik modal.

Dari sana, anda boleh memilih sama ada anda mahu memuat naik gambar dari komputer anda, dari web, atau dari webcam anda!

Halaman Contoh menawarkan sekumpulan untuk melihat, termasuk a seret & lepaskan contoh, bersama dengan halaman demo antarabangsa.

Tetapi, untuk benar-benar mengetahui cara kerja ini, saya cadangkan membuat dokumen dan melayari repo utama GitHub. Anda juga boleh berkongsi pendapat anda dengan pencipta di Twitter @transloadit.