9 niestandardowych fragmentów pól przesyłania plików Open Source

Możesz znaleźć niesamowite narzędzia do ulepszania formularzy internetowych, od zestawów UI po zaawansowane wtyczki jQuery.

Ale jednym z najtrudniejszych pól wejściowych do edycji jest pole przesyłania. Jest to domyślny element wejściowy HTML, który umożliwia użytkownikom przesyłanie plików ze swojego komputera. Zmiana stylu pola przesyłania jest ogromnym wyzwaniem w porównaniu z innymi elementami formularza.

Jeśli masz nadzieję na dostosowanie danych wejściowych do przesyłania, ta galeria pomoże. Zebrałem 9 ręcznie robionych pól przesyłania z CodePen, które dowodzą, że możesz zmienić styl pola, aby wyglądał tak, jak chcesz.

1. Przesyłanie plików płaskich

Deweloper Wallace Erick utworzył to płaskie pole przesyłania za pomocą odrobiny CSS i JavaScript. Zapożycza z trendu płaskiego designu, który unika gradientów, skupiając się na pojedynczych kolorach – często w monochromatycznej kolorystyce.

Możesz dodać ten projekt przesyłania pliku na dowolną stronę i sprawić, by wyglądał świetnie. Wszystko, co musisz zrobić, to zmienić schemat kolorów i odpowiednio umieścić go w formularzu.

Działa zgodnie z oczekiwaniami i działa na standardowym elemencie wejściowym HTML. Jest to również użyteczne w starszych przeglądarkach i powinno działać również na urządzeniach mobilnych.

2. Przesyłanie plików niestandardowych

Oto projekt, który staje się nieco bardziej abstrakcyjny dzięki polu przesyłania. Deweloper Aaron Vanston stworzył ten plik jako replikę tych, które widzimy na większych stronach internetowych.

Pomyśl o dużych technologicznych witrynach, takich jak Dropbox, Google+ i Facebook. Często mają obszar przeciągania i upuszczania z dużą przestrzenią „kliknij tutaj”, aby uruchomić okno przesyłania. Dokładnie to zrobił Aaron z tym fragmentem.

Opiera się na jQuery i dużej ilości JS/CSS do pracy. I chociaż używa standardowego pola wejściowego HTML, obsługuje również proces przesyłania za pomocą niestandardowych funkcji JS.

Jeśli znasz się na JavaScript, może to działać jako przydatny szablon do tworzenia własnego interfejsu do przesyłania plików.

3. Responsywny animowany program do przesyłania

Jeśli zajmujesz się jakimkolwiek nowoczesnym projektowaniem stron internetowych, wiesz, że musisz być responsywny. Użytkownicy mobilni mogą przesyłać pliki do sieci za pomocą tych samych formularzy, więc korzystanie z responsywnego pola wejściowego to świetny pomysł.

Spójrz na ten projekt, aby zobaczyć przykład wysokiej jakości pola przesyłania dostosowanego do urządzeń mobilnych. Jest bardzo prosty, z niewielką kwadratową przestrzenią przesyłania z obsługą przeciągania i upuszczania.

Pamiętaj tylko, że nie używa to elementu input – więc nie ma możliwości kliknięcia w celu przesłania. Myślę, że to koszmar użyteczności, ale jest to również tylko przykładowy fragment używany do testowania – więc nie jest nastawiony na doskonałą użyteczność.

Jeśli wprowadzisz ten fragment do swojej witryny, zalecamy dodanie typowego pola przesyłania obok obszaru przeciągania i upuszczania.

4. Niestandardowy program do przesyłania

Codzienne projekty deweloperskie to świetny sposób na doskonalenie umiejętności. Drew Vosburg zastosował to podejście, aby zbudować słodki formularz przesyłania hostowany bezpłatnie na CodePen.

Jest mocno dostosowany dzięki funkcjom JavaScript obsługującym efekt przeciągania i upuszczania. Ale to pole wejściowe jest w rzeczywistości zbudowane tak, aby obsługiwać zarówno dotyk, jak i kliknięcie, a także przeciąganie i upuszczanie.

Klikalny obszar to etykieta HTML ze stylem CSS. Ten element etykiety jest dołączony do pola wejściowego, które jest ukryte na stronie. Działa jak pole, które można kliknąć. Zdecydowanie sprytny pomysł i jest w pełni semantyczny.

5. Interfejs przesyłania zdjęć seryjnych

Oto jeden z najbardziej złożonych, ale imponujących fragmentów, jakie widziałem w CodePen. Umożliwia przesyłanie zdjęć do galerii bezpośrednio z komputera. Po każdym przesłanym zdjęciu zobaczysz podgląd bezpośrednio na stronie.

Działa poprzez przeciąganie obrazów przez JavaScript, a następnie konwertowanie ich na base64 w celu osadzenia w CSS.

Za każdym razem, gdy przesyłasz obrazy na serwer, wygenerują one plik tymczasowy. Na własnym serwerze możesz użyć tego tymczasowego pliku do wyświetlenia obrazu. Ale teraz, gdy CSS obsługuje base64, jest to kolejna alternatywa.

Interfejs jest super przejrzysty, a funkcja przesyłania wtapia się w to.

6. Prosty interfejs przesyłania w kolorze niebieskim

Jeśli szukasz pola przesyłania wolnego od JS, spójrz na ten przykład, stworzony przez Stephena Bakera.

Używa czystego CSS3 do zmiany stylu wprowadzania w jeden duży przycisk. Działa z ikoną przesyłania Font Awesome i po prostu otacza cały okrągły obszar wokół pola przesyłania.

Możesz zmienić styl, kolor, ikonę lub cokolwiek innego, aby dopasować je do swojej witryny. Jest to w zasadzie super czysta alternatywa dla domyślnego stylu wprowadzania i działa na czystym CSS3.

7. Niestandardowe wejście do przesyłania plików jQuery

Programista Terry Young wziął trochę jQuery i użył go do ulepszenia niektórych istniejących pól przesyłania. To jest wynik (i jest to jeden cholerny wynik, jeśli mogę tak powiedzieć).

Dzięki tym stylom możesz zmienić tekst pola przesyłania, rozmiar, kolor przycisku lub usunąć pole tekstowe, aby użyć tylko jednego przycisku.

Zauważ, że wymaga to dużej ilości jQuery, ponieważ większości tych funkcji nie można zmienić za pomocą CSS. Jeśli nie masz nic przeciwko pracy z jQuery, te opcje są fenomenalne.

8. Płaski plik wejściowy UI

Oto nieco inne płaskie pole przesyłania stworzone przez Geoffreya Crofte. Ten również opiera się na niektórych JavaScript, ale stylizuje całe wejście za pomocą właściwości CSS3.

Ponieważ jest to przykładowy fragment kodu, nie możesz nigdzie przesyłać plików. Ale łatwo to zmienić, jeśli przeniesiesz to do własnej witryny. Projekt i konfiguracja rdzenia naprawdę nadają temu fragmentowi trochę życia.

Funkcja return działa w JavaScript, więc to tam możesz obsługiwać przesyłanie plików, zmiany na ekranie lub cokolwiek innego.

Co najlepsze, te kody działają w przeglądarkach od IE 8! Jest to więc całkiem solidna opcja, jeśli martwisz się o dostępność.

9. Pola wielokrotnego przesyłania

Oto ostatnie niestandardowe pole z niespodzianką: wygląda dość prosto pod względem estetycznym – ale prawdziwą nagrodą jest funkcjonalność.

To pole przesyłania zostało zaprojektowane do obsługi wielu plików jednocześnie. Zazwyczaj nie widzisz tego w polach wejściowych — a przynajmniej nie domyślnie. Użytkownicy muszą wybrać wiele plików w tym samym oknie, a backend musi to obsługiwać.

Za pomocą tego fragmentu możesz wyświetlić wszystkie nazwy plików w jednym polu przesyłania. Możesz nawet użyć JavaScript, aby dołączyć te nazwy plików w innym miejscu strony w zwykłym widoku.