Inicio > Javascript, Programación, Web > Subir ficheros mediante Ajax, JQuery y HTML5

Subir ficheros mediante Ajax, JQuery y HTML5


HTML 5

La quinta versión de HTML nos ha traído grandes novedades haciéndonos la vida mucho más fácil a los desarrolladores webs. Una de estas novedades es poder enviar ficheros mediante Ajax, algo que no era posible en versiones anteriores y requería recurrir a trucos como iframe oculto o usar flash.

Gracias a la clase FormData podremos crear un “pack” datos e enviarlos mediante Ajax de forma muy simple.

Os voy a enseñar como mandar un formulario con un fichero de forma muy sencilla usando JQuery y HTML5.

Lo primero será crear un HTML muy básico:


<form id="formulario">
   <input type="text" name="nombre" />
   <input type="file" name="foto" />
   <input type="submit" value="Subir" />
</form>

Después un JS:

$('#formulario').submit(function ( e ) {
    var data = new FormData(this); //Creamos los datos a enviar con el formulario
    $.ajax({
        url: 'guardardatos.php', //URL destino
        data: data,
        processData: false, //Evitamos que JQuery procese los datos, daría error
        contentType: false, //No especificamos ningún tipo de dato
        type: 'POST',
        success: function (resultado) {
            alert(resultado);
        }
    });

    e.preventDefault(); //Evitamos que se mande del formulario de forma convencional
});

Y con esto ya está.

Anuncios
  1. Aún no hay comentarios.
  1. No trackbacks yet.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: