9 Fragmentos de código open source para cargar archivos a un sitio web

Te mostramos los códigos de 9 uploads de archivos para subirlos a tu sitio web.

1. Flat File Upload

El desarrollador Wallace Erick creó este script de carga con diseño flat y sólo un poco de CSS y JavaScript.

Puedes agregar este diseño de carga de archivos en cualquier página web y conseguir que se vea muy bien. Todo lo que tendrás que hacer es cambiar el esquema de color y posicionarlo correctamente dentro de tu formulario.

El desarrollo es  HTML estándar lo que permite utilizarlo con los navegadores más antiguos y en dispositivos móviles sin problemas.

See the Pen Custom FIle Upload by Wallace Erick (@wallaceerick) on CodePen.

2. Custom File Upload

El desarrollador Aaron Vanston creó este archivo de carga como una réplica de los que vemos en sitios web más grandes.

Similares al diseño de sitios webs de gran tecnología como Dropbox, Google + y Facebook. A menudo tienen un área de arrastrar y soltar con un gran espacio de «clic aquí» para iniciar 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 trabajar. Y aunque utiliza el campo de entrada HTML estándar, también maneja el proceso de carga con funciones de JS personalizadas.

See the Pen File upload input by Aaron Vanston (@aaronvanston) on CodePen.

3. Uploader animado responsivo

Actualmente es indispensable el diseño web responsive, y aquí se destaca este uploader. Los usuarios móviles pueden subir archivos a la web a través de estos mismos formularios, por lo que la utilización de un campo de entrada adaptable es una gran idea.

El diseño es muy básico, con sólo un pequeño espacio de carga cuadrada con soporte de arrastrar y soltar.

Un problema que encontramos en este script es que no dispone de un botón de carga, simplemente funciona con arrastrar y soltar, lo que podría ser una complicación. Si quieres agregar este fragmento de código en tu sitio web, recomendamos que agregues un campo de carga típico junto al área de arrastrar y soltar.

See the Pen Responsive Animated File Uploader by burnaDLX (@burnaDLX) on CodePen.

4. Uploader personalizado

Los proyectos de desarrollo diarios son una gran manera de perfeccionar tus habilidades. Drew Vosburg siguió este enfoque para construir un formulario de carga alojado libremente en CodePen.

Está muy personalizado con las funciones de JavaScript que manejan el efecto de arrastrar y soltar. Pero este campo de entrada en realidad está construido para soportar tanto el toque como el 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 se oculta fuera de la página. Funciona igual que un campo seleccionable. Definitivamente es una idea inteligente.

See the Pen File Upload – Day 031 by Drew Vosburg (@drewvosburg) on CodePen.

5. Interfaz de carga de fotos de stock

Aquí está uno de los fragmentos más complejos. Te permite subir fotos a una galería directamente desde tu ordenador. Con cada foto que subas, te mostrará una vista previa a la derecha en la página.

Funciona mediante la extracción de imágenes a través de JavaScript, para luego, convertirlos en base64 para incrustar en CSS.

Cada vez que cargue imágenes en un servidor, generará un archivo temporal. En su propio servidor, puede utilizar 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 directamente.

See the Pen Stock photo by sarayut lawilai (@gapgag55) on CodePen.

6. Simple interfaz de carga azul

Si estás buscando un file upload sin JS, entonces mira 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.

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

See the Pen File Upload Button by Stephen Baker (@stebaker) on CodePen.

7. jQuery Custom File Upload

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 espectacular!!.

A través de los estilos  CSS se puede cambiar el texto del campo de carga, el tamaño, el color del botón o eliminar el campo de texto para simplemente utilizar un solo botón.

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

See the Pen jQuery Custom File Upload Input (Enhancements) by Terry Young (@terryyounghk) on CodePen.

8. Flat UI file upload

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

El diseño y la configuración del núcleo es realmente lo que le da vida a este fragmento.

La función de retorno se ejecuta en JavaScript, de modo que es donde manejarías las cargas de archivos, los cambios en pantalla o cualquier otra cosa.

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

See the Pen Custom styles for Input file by Geoffrey Crofte (@CreativeJuiz) on CodePen.

9. Multi-Upload Fields

Parece bastante simple estéticamente, pero el verdadero premio está en la funcionalidad.

Este campo de carga fue diseñado para soportar múltiples archivos a la vez. Normalmente, esto no se ve en los campos de carga de archivos, o al menos no de forma predeterminada. Los usuarios pueden seleccionar varios archivos en la misma ventana.

Con este fragmento, puedes cargar todos los archivos para una galería de imágenes en tu sitio web.

Por supuesto que hay muchos más códigos disponibles en CodePen, simplemente es cuestión de buscar para poderlos adaptar al diseño web de tu página.

See the Pen Upload file name display by shubham chaudhari (@shubhamc_007) on CodePen.