¿Por qué el complemento jQuery-File-Upload de Blueimp no genera devoluciones de llamada?

Question

Estoy experimentando con el complemento Blueimp's jQuery-File-Upload, que a juzgar por el demo parece muy prometedor.

que es muy fácil de implementar:

var $uploadButton = $("#fileop-upload");// <input type="file" id="fileop-upload" [etc] /> 
$uploadButton.fileupload({ 
    url : "//domain/path/to/receive-uploaded-files" 
}); 

Los archivos seleccionados se cargan bien sin actualizar la página como se esperaba, pero por supuesto con una configuración mínima así el usuario no recibirá ninguna notificación. Aquí es donde las devoluciones de llamada del complemento serían útiles.

De acuerdo con la documentación, hay dos formas de definir las devoluciones de llamada. Por ejemplo, la add evento (que se activa siempre que se selecciona un archivo para la carga) se puede añadir en el objeto configuración original como esto:

$uploadButton.fileupload({ 
    add : addFileListener, 
    url : "//domain/path/to/receive-uploaded-files" 
}); 

o alternativamente:

$uploadButton.bind("fileuploadadd", addFileListener); 

Sin embargo he encontrado que solo el primer enfoque funciona, el segundo no hace nada.

Es aún más curioso que no hay otros servicios repetidos - especialmente progress y start - parece estar disparando no importa lo que les unen:

$uploadButton.fileupload({ 
    add : addFileListener, 
    progress : progressListener, 
    start : startListener, 
    url : "//domain/path/to/receive-uploaded-files" 
}); 

o

$uploadButton.fileupload({ 
    add : addFileListener, 
    url : "//domain/path/to/receive-uploaded-files" 
}); 
$uploadButton.bind("fileuploadprogress", progressListener"); 
$uploadButton.bind("fileuploadstart", startListener"); 

tengo el funciones de oyente referidas definidas, y el código no informa ningún error o advertencia.

¿Cuál es la explicación del error del método .bind y por qué los oyentes progress o start nunca se activan?

Answer 1

Soy el autor del plugin jQuery File Upload.

No tengo una explicación de por qué no se desencadena el evento fileuploadadd en su tercer código de ejemplo. Sin embargo, si anula la opción de devolución de llamada, debe asegurarse de que la carga del archivo se inicia llamando al método de envío en el argumento de datos, como se explica en el Options documentation para la devolución de llamada (también documentado en el código fuente del enchufar).

p. Ej. el siguiente código debe imprimir los diferentes eventos de devolución de llamada:

$('#fileupload').fileupload({ 
    add: function (e, data) { 
     console.log('add'); 
     data.submit(); 
    }, 
    progress: function (e, data) { 
     console.log('progress'); 
    }, 
    start: function (e) { 
     console.log('start'); 
    } 
}).bind('fileuploadadd', function (e, data) { 
    console.log('fileuploadadd'); 
}).bind('fileuploadprogress', function (e, data) { 
    console.log('fileuploadprogress'); 
}).bind('fileuploadstart', function (e) { 
    console.log('fileuploadstart'); 
}); 

también señalan que el plugin es modular y la versión de la interfaz de usuario (utilizado en el ejemplo de descarga) hace uso de las opciones de devolución de llamada que pueden reemplazar con el código anterior . Es por eso que el enlace de eventos es muy útil, ya que permite definir métodos de devolución de llamada adicionales sin anular las devoluciones de llamadas establecidas a través del objeto de opciones.

Answer 2

No estoy seguro si esto resuelve su problema o no, pero para mí, el siguiente no funciona (debería funcionar por la documentación:

$uploadButton.bind 'fileuploadchange', (e, data) => 
    # Do something 

Sin embargo, las siguientes obras:

$uploadButton.bind 'change', (e, data) => 
    # Do something 

Answer 3

esto no funcionó para mí.

$('#fileupload').fileupload({url: '/url/to/server/'}); 

$('#fileupload').bind('fileuploaddone', function (e, data) { 
    console.log('success!!!'); 

    console.log(e); 

    console.log(data); 

}); 

Pero esto hizo!

$('#fileupload').fileupload({url: '/url/to/server/'}).bind('fileuploaddone', function (e, data) { 
    console.log('success!!!'); 

    console.log(e); 

    console.log(data); 

}); 

Mi primera suposición es que en el primer caso va a enlazar el evento a la entrada de forma real en lugar del objeto fileupload, y en el segundo, mediante el uso de chainning en realidad se está utilizando el objeto fileupload, supongo que la documentación es ambigua, ya que lee:

$('#fileupload').bind('fileuploadadd', function (e, data) {/* ... */}); 

Y debe leer

$('#fileupload').fileupload().bind('fileuploadadd', function (e, data) {/* ... */}); 

Answer 4

En lugar de,

$('#fileupload').bind('fileuploadadd', function (e, data) {/*...*/}); 

utilicé,

$('#fileupload').bind('fileuploadchange', function (e, data) {/*...*/}); 

y funcionó para mí.

Answer 5

Si se define el evento add, no se activarán todas las devoluciones de llamadas de proceso.

$(function(){ 
    var fileupload=$('#fileupload').fileupload({ 
     url: 'fileupload.php', 
     dataType: 'json', 
     add: function(e, data) { 
      data.submit(); 
     }, 
    }) 
    .on('fileuploadprocessalways', function (e, data) { 
     //Won't be triggered if add callback is defined 
    }) 
});