subir - Progreso de carga de jQuery y carga de archivos AJAX

subir archivos jquery

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 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 usando el complemento jquery.uploadprogress para obtener el progreso de carga de un archivo desde 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 esté completo. ¿Cómo implementaría eso?

EDITAR:
Necesito esto pronto y es importante, así que voy a poner una recompensa de 100 puntos en esta pregunta. La primera persona en responder recibirá los 100 puntos.

EDICION 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

Aquí hay algunas opciones para usar AJAX para cargar archivos:

• AjaxFileUpload : requiere un elemento de formulario en la página, pero carga el archivo sin volver a cargar la página. Ver la Demo .

• Lista de complementos de JQuery etiquetados con "Archivo"

• Uploadify : un método basado en Flash para cargar archivos.

• ¿Cómo puedo subir archivos de forma asíncrona?

• Diez ejemplos de carga de archivos AJAX : esto se publicó este año.

ACTUALIZACIÓN: Aquí hay un complemento de JQuery para carga de múltiples archivos .

Answer 2

Cargar archivos es realmente posible con AJAX en estos días. Sí, AJAX, no algunos aspirantes a AJAX repugnantes como swf o java.

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

(También incluye la interfaz de arrastrar / soltar, pero eso se ignora fácilmente).

Básicamente, a lo que se reduce es a esto:

<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/ )

Básicamente, lo que se reduce a esto es esto =)

xhr.send(file);

Donde 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 del servidor sea más limpio y más compatible con versiones anteriores (ya que la solicitud ahora tiene el mismo formato que las formas normales).

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

Así es como manejé la solicitud (1 imagen por 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;
}