BlogsPopuli

  • Inicio
  • Cómo empezar
  • Descuentos
  • Plantillas para blogs
    • WordPress
    • Blogger
  • Guías!
Inicio » Web » Creando un formulario que envie archivos a nuestra web

Creando un formulario que envie archivos a nuestra web

Muchas veces es necesario crear formularios de todo tipo en nuestros blogs, pueden ser formularios de contacto, para registros, envío de información y archivos donde se pueden excluir determinadas extensiones.

Si bien WordPress cuenta con plugins que facilitan el proceso de programar y personalizar a través del código puro un formulario, siempre es importante saber como hacer que estos códigos de programación funcionen en nuestros sitios.

formulario archivos

En este caso veremos como crear un formulario para subir archivos con jQuery, CSS3, PHP y HTML5. Una de las mas interesantes características de la nueva versión de CSS y HTML es que nos facilitan el trabajo y reducen el tiempo que nos tomamos en crear efectos y trucos con las nuevas etiquetas de estos lenguajes de programación.

Primer paso: Para crear el formulario que permita enviar archivos desde nuestro blog o web, contaremos con la siguiente estructura de los ficheros:

css, donde van las hojas de estilo.

img, donde se alojan todas las imágenes.

js, scripts en javascript y jquery

uploads, este es el directorio donde llegaran los archivos subidos a través del formulario.

Segundo paso: Crearemos el lenguaje marcador de hipertexto para el formulario donde se incluyen los botones de seleccionar y subir archivos y barra de progreso.

Tercer paso: Ahora agregaremos los archivos .js dentro de las etiquetas head de nuestro sitio o blog.

Cuarto paso: Configuramos el formulario de subida de archivos.

Quinto paso: Daremos estilo a través del css a nuestro formulario envolviéndolo en una capa con un poco opacidad y transparencia, botones y texto dentro del formulario, estilo en los archivos seleccionados y barra de progreso.

Listo, en 5 pasos hemos configurado y creado un  formulario que nos permite subir archivos desde nuestra web o blog a un directorio. Esto tomara un promedio de una hora siempre y cuando no cometas errores y tengas dificultades.

El máximo de peso de las imágenes es de 800KB con uso de HTML5.

Ver guía completa de instalación.

Ver demo

Feb 7, 2013leiva

Comparte esto:

  • Tweet

Relacionado

7 febrero, 2013 WebCSS3, HTML5, PHP
4 herramientas gratuitas para detectar tu posición en los buscadoresComo crear un mega menu desplegable con CSS3 en Blogger

Deja un comentario Cancelar respuesta

De interés! (o no..)

📝 Mi lista de la compra

📕 [PDF] Cómo hacer un blog y ganar dinero

🏆 Top Hostings

Categorías
  • Alojamiento web
  • Crear un blog
    • Blogger
    • Wordpress
  • Diseño
  • Ganar dinero con un blog
    • Adsense
  • Noticias
  • Opiniones
  • Posicionamiento SEO
  • Recursos
  • Redes Sociales
    • Facebook
    • Twitter
  • Sin categoria
  • Web
Sígueme!

BlogsPopuli

Seguir a @Blogspopuli

Lo + Leído!
  • Como mostrar el resumen de una entrada en wordpress
  • La historia de los blogs desde su inicio hasta la actualidad
  • Adsense y tu blog: cómo recibir más clics (aumentar CTR)
  • 14 Trucos para poner un título irresistible a tus artículos
  • Motivos por los que tu blog podría ser baneado en Adsense
Lo último!
  • Opinión de Arvixe Hosting
  • Cómo crear un blog desde 0; Guía en pdf
  • Opinión de Hostgator en 2015. ¿Buen alojamiento?
  • Plugins que no pueden faltar en tu WordPress (2015)
  • Cómo preparar WordPress antes de empezar, ajustes básicos
Últimos comentarios
  • Emilio en LinkBuilding: Cómo dejar comentarios perfectos en otros blogs
  • Cipriano en LinkBuilding: Cómo dejar comentarios perfectos en otros blogs
  • Café en LinkBuilding: Cómo dejar comentarios perfectos en otros blogs
  • Mark en Plugins que no pueden faltar en tu WordPress (2015)
  • Miguel en LinkBuilding: Cómo dejar comentarios perfectos en otros blogs

Blogs Populi / Cómo hacer un blog y ganar dinero con él funciona gracias a WordPress