Vamos a ver cómo usar las nuevas oportunidades que ofrece Ajax 2 para poder subir ficheros asíncronamente al servidor. Las utilidades de esto son claras, ya que no tienes que hacer submit de ningún formulario para poder guardar, por ejemplo, una foto en tus servidores.

Te voy a mostrar cómo hacerlo con jQuery y en nativo, si estas en un navegador que use la nueva implementación de Ajax o Ajax2.

  • jQuery
$.ajax({
    url: [url-del-servidor-donde-hacer-la-subida],
    type: "POST", // Queremos hacer una post para subir datos
    enctype: 'multipart/form-data', // Subimos el fichero por partes
    data:{file: $('#my-input-type-file-id').val()},
}).then( function(){ console.log( "Subida finalizada!!!" ) } );

Como veis, es extremadamente simple. Hacemos un post al servidor y en el body le pasamos el contenido de nuestro input[type="file"] en la clave file

  • Nativo
function uploadFile( file ){  
  var data = new FormData(),
      xhr = new XMLHttpRequest();

  xhr.onloadstart = function () {
    console.log('Empieza la subida de: ', file.name);
  };

  xhr.onerror = function (e) {
    console.log( 'Algo fue mal en la subida :(' );
  };

  data.append('file', file, file.name);
  xhr.open('POST', '/url-to-post');
  xhr.send(data);
}

uploadFile( document.getElementById( 'fileInput' ).files[0] );  

Aquí todo se hace usando directamente el objeto XHR y FormData. Sobre todo, no debes perder de vista esta línea:

data.append('file', file, file.name);  

Es importante que el primer parámetro sea la cadena file para que puedas acceder correctamente al fichero desde el servidor.


Recursos:

Suscríbete a mi lista de correo

* Campos obligatorios