jQuery Upload Progress y AJAX file upload

Question

Parece que no he comunicado claramente mi problema. Necesito enviar un archivo (usando AJAX) y necesito obtener el progreso de carga del archivo usando el Nginx HttpUploadProgressModule. Necesito una buena solución a este problema. Lo he intentado con el plugin jquery.uploadprogress, pero estoy teniendo que volver a escribir mucho para que funcione en todos los navegadores y enviar el archivo usando AJAX.

Todo lo que necesito es el código para hacer esto y debe funcionar en todos los principales navegadores (Chrome, Safari, Firefox e IE). Sería aún mejor si pudiera obtener una solución que manejará múltiples cargas de archivos.

Estoy utilizando el jquery.uploadprogress plugin para obtener el progreso de carga de un archivo desde el NginxHttpUploadProgressModule. Esto está dentro de un iframe para una aplicación de Facebook. Funciona en Firefox, pero falla en Chrome/Safari.

Cuando abro la consola obtengo esto.

Uncaught ReferenceError: progressFrame is not defined 
jquery.uploadprogress.js:80 

¿Alguna idea de cómo arreglaría eso?

También me gustaría enviar el archivo usando AJAX cuando se completa. ¿Cómo implementaría eso?

EDIT:
necesito esto pronto y es importante, así que voy a poner una recompensa de 100 puntos sobre esta cuestión. La primera persona en responder recibirá los 100 puntos.

EDIT 2:
Jake33 me ayudó a resolver el primer problema. La primera persona en dejar una respuesta con la forma de enviar el archivo con ajax también recibirá los 100 puntos.

Answer 1

En la actualidad, la carga de archivos es posible con AJAX. Sí, AJAX, no algunos aspirantes a AJAX repugnantes como swf o java.

Este ejemplo podría ayudarle a cabo: https://webblocks.nl/tests/ajax/file-drag-drop.html

(También incluye la interfaz de arrastrar/soltar pero eso es fácilmente ignorado.)

Básicamente lo que se reduce a lo siguiente:

<input id="files" type="file" /> 

<script> 
document.getElementById('files').addEventListener('change', function(e) { 
    var file = this.files[0]; 
    var xhr = new XMLHttpRequest(); 
    (xhr.upload || xhr).addEventListener('progress', function(e) { 
     var done = e.position || e.loaded 
     var total = e.totalSize || e.total; 
     console.log('xhr progress: ' + Math.round(done/total*100) + '%'); 
    }); 
    xhr.addEventListener('load', function(e) { 
     console.log('xhr upload complete', e, this.responseText); 
    }); 
    xhr.open('post', '/URL-HERE', true); 
    xhr.send(file); 
}); 
</script> 

(demo: http://jsfiddle.net/rudiedirkx/jzxmro8r/)

Así que básicamente lo que se reduce a lo siguiente =)

xhr.send(file); 

Dónde file es typeof Blob: http://www.w3.org/TR/FileAPI/

Otra forma (mejor IMO) es usar FormData. Esto le permite 1) nombrar un archivo, como en un formulario y 2) enviar otras cosas (también archivos), como en un formulario.

var fd = new FormData; 
fd.append('photo1', file); 
fd.append('photo2', file2); 
fd.append('other_data', 'foo bar'); 
xhr.send(fd); 

FormData hace que el código más limpio y más servidor compatible con versiones anteriores (ya que la petición ahora tiene exactamente el mismo formato que las formas normales).

Todo no es experimental, pero es muy moderno. Chrome 8+ y Firefox 4+ saben qué hacer, pero no sé de ningún otro.

Esta es la forma en que manejé la (1 imagen por solicitud) solicitud en PHP:

if (isset($_FILES['file'])) { 
    $filename = basename($_FILES['file']['name']); 
    $error = true; 

    // Only upload if on my home win dev machine 
    if (isset($_SERVER['WINDIR'])) { 
     $path = 'uploads/'.$filename; 
     $error = !move_uploaded_file($_FILES['file']['tmp_name'], $path); 
    } 

    $rsp = array(
     'error' => $error, // Used in JS 
     'filename' => $filename, 
     'filepath' => '/tests/uploads/' . $filename, // Web accessible 
    ); 
    echo json_encode($rsp); 
    exit; 
} 

Answer 2

Estas son algunas de las opciones para el uso de AJAX para subir archivos:

• AjaxFileUpload - Requiere un elemento de formulario en la página, pero carga el archivo sin tener que recargar la página. Vea el Demo.

• List of JQuery Plug-ins Tagged With "File"

• Uploadify - Un método basado en Flash de la carga de archivos.

• How can I upload files asynchronously?

• Ten Examples of AJAX File Upload - Este fue publicada este año.

UPDATE: Aquí es una JQuery plug-in para Multiple File Uploading.