9 Fragmentos de campo de carga de archivos de código abierto personalizados

Puede encontrar herramientas increíbles para mejorar los formularios web, que van desde kits de interfaz de usuario hasta complementos avanzados de jQuery.

Pero uno de los campos de entrada más difíciles de editar es el campo de carga. Este es un elemento de entrada HTML predeterminado y permite a los usuarios cargar archivos desde su computadora. Rediseñar el campo de carga es un gran desafío en comparación con otros elementos de formulario.

Si espera personalizar sus entradas de carga, esta galería lo ayudará. Recopilé 9 campos de carga hechos a mano de CodePen que prueban que puede cambiar el estilo del campo para que se vea como quiera.

1. Carga de archivo plano

El desarrollador Wallace Erick creó este campo de carga plano con solo un poco de CSS y JavaScript. Se basa en la tendencia del diseño plano, que evita los degradados centrándose en colores únicos, a menudo con un esquema de color monocromático.

Puede agregar este diseño de carga de archivos en cualquier página y hacer que se vea genial. Todo lo que tendrá que hacer es cambiar el esquema de color y colocarlo correctamente dentro de su formulario.

Funciona como cabría esperar y se ejecuta en el elemento de entrada HTML estándar. Por lo tanto, esto también se puede usar con navegadores más antiguos y también debería funcionar en dispositivos móviles.

2. Carga de archivos personalizados

Aquí hay un diseño que se vuelve un poco más abstracto con el campo de carga. El desarrollador Aaron Vanston creó esta carga de archivos como una réplica de los que vemos en sitios web más grandes.

Piense en los grandes sitios de tecnología como Dropbox, Google+ y Facebook. A menudo tienen un área de arrastrar y soltar con un gran espacio para "hacer clic aquí" para abrir la ventana de carga. Eso es exactamente lo que hizo Aaron con este fragmento.

Se basa en jQuery y una buena cantidad de JS/CSS para funcionar. Y aunque usa el campo de entrada HTML estándar, también maneja el proceso de carga con funciones JS personalizadas.

Si conoce JavaScript, esto puede funcionar como una plantilla útil para crear su propia interfaz de usuario de carga de archivos.

3. Cargador animado receptivo

Si hace algún tipo de diseño web moderno, entonces sabe que tiene que responder. Los usuarios móviles pueden subir archivos a la web a través de estos mismos formularios, por lo que utilizar un campo de entrada sensible es una gran idea.

Eche un vistazo a este diseño para ver un ejemplo de un campo de carga compatible con dispositivos móviles de calidad. Es muy básico, con solo un pequeño espacio de carga cuadrado con soporte para arrastrar y soltar.

Solo tenga en cuenta que esto no usa el elemento de entrada, por lo que no hay forma de hacer clic para cargar. Creo que es una pesadilla de usabilidad, pero también es solo un fragmento de muestra que se usa para probar, por lo que no está orientado a una usabilidad perfecta.

Si trae este fragmento a su sitio, se recomienda que agregue un campo de carga típico junto al área de arrastrar y soltar.

4. Cargador personalizado

Los proyectos de desarrollo diarios son una excelente manera de mejorar sus habilidades. Drew Vosburg siguió este enfoque para crear un formulario de carga dulce alojado libremente en CodePen.

Está muy personalizado con funciones de JavaScript que manejan el efecto de arrastrar y soltar. Pero este campo de entrada en realidad está diseñado para admitir tocar y hacer clic, junto con arrastrar y soltar.

El área en la que se puede hacer clic es una etiqueta HTML diseñada con CSS. Ese elemento de etiqueta se adjunta al campo de entrada, que está oculto fuera de la página. Funciona como un campo en el que se puede hacer clic. Definitivamente una idea inteligente y es totalmente semántica para arrancar.

5. Interfaz de carga de fotos de stock

Este es uno de los fragmentos más complejos e impresionantes que he visto en CodePen. Te permite cargar fotos en una galería directamente desde tu computadora. Con cada foto que subas, te mostrará una vista previa directamente en la página.

Funciona extrayendo imágenes a través de JavaScript y luego convirtiéndolas en base64 para incrustarlas en CSS.

Siempre que subas imágenes a un servidor, generarán un archivo temporal. En su propio servidor, puede usar este archivo temporal para mostrar la imagen. Pero ahora que CSS soporta base64, esta es otra alternativa.

La interfaz es súper limpia y la función de carga se integra perfectamente.

6. Interfaz de usuario de carga azul simple

Si está buscando un campo de carga sin JS, eche un vistazo a este ejemplo, creado por Stephen Baker.

Utiliza CSS3 puro para cambiar el estilo de entrada en un botón grande. Funciona con el ícono de carga de Font Awesome y simplemente envuelve un área circular completa alrededor del campo de carga.

Puede cambiar el estilo, el color, el ícono o cualquier otra cosa para que coincida con su sitio. Es básicamente una alternativa súper limpia al estilo de entrada predeterminado y se ejecuta en CSS3 puro.

7. Entrada de carga de archivos personalizados de jQuery

El desarrollador Terry Young tomó un poco de jQuery y lo usó para mejorar algunos campos de carga existentes. Este es el resultado (y es un gran resultado, si puedo decirlo).

A través de estos estilos, puede cambiar el texto del campo de carga, el tamaño, el color del botón o eliminar el campo de texto para usar solo un botón.

Tenga en cuenta que esto requiere una buena cantidad de jQuery porque la mayoría de estas características no se pueden modificar con CSS. Si no te importa trabajar con jQuery, estas opciones son fenomenales.

8. Archivo de entrada de interfaz de usuario plana

Aquí hay un campo de carga plano ligeramente diferente creado por Geoffrey Crofte. Este también se basa en algo de JavaScript, pero diseña toda la entrada con propiedades CSS3.

Dado que este es un fragmento de muestra, en realidad no puede cargar archivos en ningún lado. Pero eso es bastante fácil de cambiar si lo mueve a su propio sitio. El diseño central y la configuración es realmente lo que le da vida a este fragmento.

La función de devolución se ejecuta en JavaScript, por lo que es donde manejaría las cargas de archivos, los cambios en pantalla o cualquier otra cosa.

¡Lo mejor de todo es que estos códigos funcionan en navegadores que se remontan a IE 8! Así que es una opción bastante sólida si te preocupa la accesibilidad.

9. Campos de carga múltiple

Aquí hay un campo personalizado final con un giro: parece bastante simple estéticamente, pero el verdadero premio está en la funcionalidad.

Este campo de carga se diseñó para admitir varios archivos a la vez. Por lo general, no ve esto con los campos de entrada, o al menos no de forma predeterminada. Los usuarios deben seleccionar varios archivos en la misma ventana y el backend debe admitir eso.

Con este fragmento, puede enumerar todos los nombres de archivo en un campo de carga. Incluso podría usar JavaScript para agregar esos nombres de archivo en otra parte de la página a la vista.