9 Benutzerdefinierte Open-Source-Datei-Upload-Feld-Snippets

Sie können erstaunliche Tools zur Verbesserung von Webformularen finden, die von UI-Kits bis hin zu erweiterten jQuery-Plugins reichen.

Aber eines der am schwierigsten zu bearbeitenden Eingabefelder ist das Upload-Feld. Dies ist ein standardmäßiges HTML-Eingabeelement, mit dem Benutzer Dateien von ihrem Computer hochladen können. Die Neugestaltung des Upload-Felds ist im Vergleich zu anderen Formularelementen eine große Herausforderung.

Wenn Sie Ihre Upload-Eingaben anpassen möchten, hilft Ihnen diese Galerie. Ich habe 9 handgefertigte Upload-Felder von CodePen gesammelt, die beweisen, dass Sie das Feld so umgestalten können, dass es so aussieht, wie Sie es möchten.

1. Flatfile-Upload

Entwickler Wallace Erick hat dieses flache Upload-Feld mit nur ein bisschen CSS und JavaScript erstellt. Es greift den Trend des Flat Designs auf, das Farbverläufe vermeidet, indem es sich auf einzelne Farben konzentriert – oft mit einer monochromen Farbgebung.

Sie können dieses Datei-Upload-Design auf jeder Seite hinzufügen und es großartig aussehen lassen. Alles, was Sie tun müssen, ist das Farbschema zu ändern und es richtig in Ihrem Formular zu positionieren.

Es funktioniert genau so, wie Sie es erwarten würden, und es läuft auf dem Standard-HTML-Eingabeelement. Dies ist also auch mit älteren Browsern nutzbar und sollte auch auf Mobilgeräten funktionieren.

2. Benutzerdefinierter Datei-Upload

Hier ist ein Design, das mit dem Upload-Feld etwas abstrakter wird. Der Entwickler Aaron Vanston hat diesen Datei-Upload als Nachbildung derjenigen erstellt, die wir auf größeren Websites sehen.

Denken Sie an große Tech-Sites wie Dropbox, Google+ und Facebook. Sie haben oft einen Drag-and-Drop-Bereich mit einem großen „Hier klicken“-Feld, um das Upload-Fenster zu starten. Genau das hat Aaron mit diesem Ausschnitt getan.

Es ist auf jQuery und eine gute Menge JS/CSS angewiesen, um zu funktionieren. Und während es das Standard-HTML-Eingabefeld verwendet, verarbeitet es auch den Upload-Prozess mit benutzerdefinierten JS-Funktionen.

Wenn Sie sich mit JavaScript auskennen, kann dies als praktische Vorlage zum Erstellen Ihrer eigenen Benutzeroberfläche zum Hochladen von Dateien dienen.

3. Reaktionsschneller animierter Uploader

Wenn Sie modernes Webdesign betreiben, wissen Sie, dass Sie reaktionsschnell sein müssen. Mobile Benutzer können Dateien über dieselben Formulare ins Web hochladen, daher ist die Verwendung eines responsiven Eingabefelds eine großartige Idee.

Sehen Sie sich dieses Design als Beispiel für ein qualitativ hochwertiges, für Mobilgeräte optimiertes Upload-Feld an. Es ist sehr einfach, mit nur einem kleinen quadratischen Upload-Bereich mit Drag & Drop-Unterstützung.

Beachten Sie nur, dass das Eingabeelement nicht verwendet wird – es gibt also keine Möglichkeit, zum Hochladen zu klicken. Ich denke, das ist ein Usability-Albtraum, aber das ist auch nur ein Beispiel-Snippet, das zum Testen verwendet wird – es ist also nicht auf perfekte Usability ausgerichtet.

Wenn Sie dieses Snippet in Ihre Website integrieren, wird empfohlen, dass Sie neben dem Drag & Drop-Bereich ein typisches Upload-Feld hinzufügen.

4. Benutzerdefinierter Uploader

Tägliche Entwicklungsprojekte sind eine großartige Möglichkeit, Ihre Fähigkeiten zu verbessern. Drew Vosburg folgte diesem Ansatz, um ein süßes Upload-Formular zu erstellen, das kostenlos auf CodePen gehostet wird.

Es ist stark angepasst mit JavaScript-Funktionen, die den Drag-and-Drop-Effekt handhaben. Aber dieses Eingabefeld ist eigentlich so aufgebaut, dass es sowohl Berührung als auch Klick sowie Ziehen und Ablegen unterstützt.

Der anklickbare Bereich ist ein mit CSS gestaltetes HTML-Etikett. Dieses Beschriftungselement wird an das Eingabefeld angehängt, das von der Seite ausgeblendet wird. Es funktioniert genau wie ein anklickbares Feld. Definitiv eine schlaue Idee und obendrein vollständig semantisch.

5. Hochladen von Stockfoto-Schnittstelle

Hier ist einer der komplexesten, aber beeindruckendsten Ausschnitte, die ich auf CodePen gesehen habe. Damit können Sie Fotos direkt von Ihrem Computer in eine Galerie hochladen. Bei jedem Foto, das Sie hochladen, wird Ihnen direkt auf der Seite eine Vorschau angezeigt.

Es funktioniert, indem es Bilder durch JavaScript zieht und sie dann in base64 konvertiert, um sie in CSS einzubetten.

Immer wenn Sie Bilder auf einen Server hochladen, wird eine temporäre Datei generiert. Auf Ihrem eigenen Server können Sie diese temporäre Datei verwenden, um das Bild anzuzeigen. Aber jetzt, da CSS base64 unterstützt, ist dies eine weitere Alternative.

Die Benutzeroberfläche ist super sauber und die Upload-Funktion fügt sich nahtlos ein.

6. Einfache blaue Upload-Benutzeroberfläche

Wenn Sie nach einem JS-freien Upload-Feld suchen, sehen Sie sich dieses Beispiel an, das von Stephen Baker erstellt wurde.

Es verwendet reines CSS3, um den Eingabestil in eine große Schaltfläche zu ändern. Es funktioniert mit dem Upload-Icon von Font Awesome und wickelt einfach einen ganzen kreisförmigen Bereich um das Upload-Feld.

Sie können den Stil, die Farbe, das Symbol oder irgendetwas anderes ändern, damit dies zu Ihrer Website passt. Es ist im Grunde eine supersaubere Alternative zum Standard-Eingabestil und läuft auf reinem CSS3.

7. jQuery-Eingabe zum Hochladen benutzerdefinierter Dateien

Der Entwickler Terry Young nahm ein bisschen jQuery und verwendete es, um einige vorhandene Upload-Felder zu verbessern. Das ist das Ergebnis (und es ist ein verdammt gutes Ergebnis, wenn ich das sagen darf).

Mit diesen Stilen können Sie den Text, die Größe und die Farbe des Upload-Felds ändern oder das Textfeld entfernen, um nur eine einzige Schaltfläche zu verwenden.

Beachten Sie, dass dies eine Menge jQuery erfordert, da die meisten dieser Funktionen nicht mit CSS geändert werden können. Wenn es Ihnen nichts ausmacht, mit jQuery zu arbeiten, sind diese Optionen phänomenal.

8. Flache UI-Eingabedatei

Hier ist ein etwas anderes flaches Upload-Feld, das von Geoffrey Crofte erstellt wurde. Dieser setzt ebenfalls auf etwas JavaScript, gestaltet aber die gesamte Eingabe mit CSS3-Eigenschaften.

Da es sich um ein Beispiel-Snippet handelt, können Sie eigentlich keine Dateien irgendwo hochladen. Aber das lässt sich leicht ändern, wenn Sie dies auf Ihre eigene Website verschieben. Das Kerndesign und die Einrichtung verleihen diesem Snippet wirklich etwas Leben.

Die Rückgabefunktion wird in JavaScript ausgeführt, sodass Sie dort die Datei-Uploads, Änderungen auf dem Bildschirm oder irgendetwas anderes handhaben würden.

Das Beste daran ist, dass diese Codes in Browsern ab IE 8 funktionieren! Es ist also eine ziemlich solide Option, wenn Sie sich Sorgen um die Zugänglichkeit machen.

9. Mehrfach-Upload-Felder

Hier ist ein letztes benutzerdefiniertes Feld mit einem Twist: Es sieht ästhetisch ziemlich einfach aus – aber der wahre Preis liegt in der Funktionalität.

Dieses Upload-Feld wurde entwickelt, um mehrere Dateien gleichzeitig zu unterstützen. Bei Eingabefeldern sieht man das normalerweise nicht – oder zumindest nicht standardmäßig. Benutzer müssen mehrere Dateien im selben Fenster auswählen und das Backend muss dies unterstützen.

Mit diesem Snippet können Sie alle Dateinamen in einem Upload-Feld auflisten. Sie könnten sogar JavaScript verwenden, um diese Dateinamen an anderer Stelle auf der Seite in einfacher Ansicht anzuhängen.