jQuery equivalente a la carga de XMLHttpRequest?

Question

Al trabajar con la API de archivos de HTML5, la carga se realiza a través de un objeto llamado upload en el XMLHttpRequest. This es el tutorial con el que estoy trabajando (y el Google cache mirror ya que está inactivo en este momento). Esta es la parte relevante:

// Uploading - for Firefox, Google Chrome and Safari 
xhr = new XMLHttpRequest(); 

// Update progress bar 
xhr.upload.addEventListener("progress", function (evt) { 

Como se puede ver, para seguir el progreso de la carga, el objeto XMLHttpRequest tiene una propiedad denominada upload, que podemos añadir un controlador de eventos.

Mi pregunta es: tiene jQuery un equivalente?. Estoy intentando dejar el código lo más limpio y compatible posible entre navegadores, siempre que Microsoft considere que es una buena idea (aunque suena como it will be in 2012 or 2013).

Answer 1

Esto es lo que se me ocurrió para solucionar el problema. La llamada $ .ajax() permite proporcionar una devolución de llamada para generar el XHR. Solo genero uno antes de llamar a la solicitud, configurarlo y luego crear un cierre para devolverlo cuando $ .ajax() lo necesite. Hubiera sido mucho más fácil si hubieran dado acceso a él a través de jqxhr, pero no es así.

var reader = new FileReader(); 

reader.onloadend = function (e) { 
    var xhr, provider; 

    xhr = jQuery.ajaxSettings.xhr(); 
    if (xhr.upload) { 
     xhr.upload.addEventListener('progress', function (e) { 
      // ... 
     }, false); 
    } 
    provider = function() { 
     return xhr; 
    }; 

    // Leave only the actual base64 component of the 'URL' 
    // Sending as binary ends up mangling the data somehow 
    // base64_decode() on the PHP side will return the valid file. 
    var data = e.target.result; 
    data = data.substr(data.indexOf('base64') + 7); 

    $.ajax({ 
     type: 'POST', 
     url: 'http://example.com/upload.php', 
     xhr: provider, 
     dataType: 'json', 
     success: function (data) { 
      // ... 
     }, 
     error: function() { 
      // ... 
     }, 
     data: { 
      name: file.name, 
      size: file.size, 
      type: file.type, 
      data: data, 
     } 
    }); 
}; 
reader.readAsDataURL(file); 

Answer 2

El documentation para el jqXHR (el superconjunto de XMLHttpRequest que se devuelve de la llamada .ajax() de jQuery) no describe la característica de actualización como expuesta, lo que no significa que no esté expuesta. This question, sin embargo, parece indicar que la carga no está expuesta. La respuesta proporciona una forma de llegar al objeto nativo XMLHttpRequest.

En las versiones anteriores a jQuery 1.5, el objeto XMLHttpRequest se expuso directamente, por lo que puede acceder a cualquier característica que el navegador admita. This tutorial para construir un cargador de arrastrar y soltar hace precisamente eso.

Una búsqueda de jquery html 5 file upload muestra this plugin para subir varios archivos con el archivo HTML 5 API, pero este complemento no funciona actualmente en IE. Si no desea utilizar HTML 5 y, en su lugar, desea tener compatibilidad con el navegador cruzado ahora, existen otros complementos que puede consultar en jQuery en el sitio del complemento de jQuery.