Ελεύθερο ES5 / ES6 αρχείο μεταφόρτωσης αρχείου JavaScript - Uppy
Μία από τις πιο δύσκολες μορφές εισόδου στο σχεδιασμό είναι η ανέβασμα αρχείου. Έχει ένα προεπιλεγμένο στυλ HTML, αλλά δεν είναι το ωραιότερο πράγμα στον κόσμο.
Uppy λαμβάνει μεταφορτώσεις αρχείων σε ένα εντελώς νέο επίπεδο με ένα προσαρμοσμένη διεπαφή και ένα δυναμική διαδικασία φόρτωσης τύπου Ajax.
Το λειτουργεί με τον κωδικό ES5 / ES6, ώστε να μπορείτε να δημιουργήσετε τις εφαρμογές ιστού σας με τα πιο πρόσφατα πρότυπα JavaScript. Και, ακόμη και υποστηρίζει μεταφορτώσεις αρχείων από τοποθεσίες αποθήκευσης cloud όπως το Dropbox ή το Google Drive, έτσι είναι α πολύπλευρη δέσμη ενεργειών μεταφόρτωσης αρχείων για τον ιστό.
Το Uppy είναι εντελώς δωρεάν και ανοικτού κώδικα, με ένα repo στο GitHub. Ωστόσο, ο ευκολότερος τρόπος για να εγκαταστήσετε αυτό το plugin είναι μέσω npm ή Νήματα, έτσι μπορείτε το τρέξτε σαν ένα πραγματικό πακέτο.
Μόλις φτάσετε τα αρχεία που προστίθενται στην ιστοσελίδα σας, απλά συμπεριλάβετε το αρχείο Uppy.js και τον κώδικα CSS. Στη συνέχεια, στοχεύετε ό, τι πεδίο εισαγωγής θέλετε και η Uppy φροντίζει τα υπόλοιπα.
Έχει μια μοναδική διασύνδεση που μοιάζει με μια μεγάλη τετράγωνη τοποθέτηση για μεταφορά και απόθεση αρχείων. Μπορείτε επίσης να επιλέξτε στοιχεία από το σκληρό σας δίσκο ή ακόμη και αποστολή αρχείων από απόσταση από εξωτερικές διευθύνσεις URL. Αρκετά τρελό!
Μπορείτε να βρείτε ολόκληρη τη διαδικασία εγκατάστασης στη σελίδα τεκμηρίωσης, αλλά αυτό απαιτεί τουλάχιστον κάποια κατανόηση του ECMAScript 6. Αυτή η βιβλιοθήκη εξετάζει το μέλλον των σεναρίων και δεν είναι το πιο εύκολο πράγμα που πρέπει να χρησιμοποιήσετε με την καθαρή βανίλια JavaScript.
Αλλά αν είστε σοβαροί για την ανάπτυξη ιστού αξίζει να μάθετε ES6 ούτως ή άλλως. Μπορείς να βρεις τόνοι πόρων σε απευθείας σύνδεση για αυτοδίδακτο και μπορείτε να χρησιμοποιήσετε ακόμα και την Uppy ως την πρώτη σας “πραγματικός” σχέδιο για να βουτήξετε και να ξεκινήσετε τη μάθηση.
Ελέγξτε το παράδειγμα πίνακα εργαλείων δείτε Uppy in action. Για αυτή τη σελίδα, το η μεταφόρτωση κρύβεται πίσω από ένα κουμπί ενεργοποίησης, όπου κάνετε κλικ στο κουμπί για να εμφανίσετε ένα πεδίο μεταφόρτωσης στυλ.
Από εκεί, μπορείτε να επιλέξετε αν θέλετε να ανεβάσετε μια φωτογραφία από τον υπολογιστή σας, από τον ιστό ή ακόμα και από την κάμερα!
Η σελίδα "Παραδείγματα" προσφέρει ένα μάτσο για να κοιτάξει κανείς, συμπεριλαμβανομένου ενός drag & drop παράδειγμα, μαζί με ένα διεθνοποιημένη σελίδα επίδειξης.
Αλλά, για να μάθετε πραγματικά πώς λειτουργεί αυτό, σας συνιστώ να απομακρύνετε τα έγγραφα και να περιηγηθείτε στο κύριο GitHub repo. Μπορείτε επίσης να μοιραστείτε τις σκέψεις σας με τους δημιουργούς στο Twitter @transloadit.
