example - jquery fileupload beforesend

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

Question

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

Es realmente 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 como esta, 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, el evento add (que se activa cada vez que se selecciona un archivo para cargar) se puede agregar en el objeto de configuración original como este:

$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 haya otras devoluciones de llamadas, especialmente progress y start , que parecen estar disparando, sin importar cómo las enlace:

$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 las funciones referidas del oyente definidas, y el código no informa ningún error o advertencia.

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

Answer 1

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 fue!

$(''#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, está vinculando el evento con la entrada de formulario real en lugar del objeto de carga de archivo, y en el segundo, al utilizar chainning está utilizando realmente el objeto de carga de archivo, supongo que la documentación es ambigua dado que lee :

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

Y debería leer

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

Answer 2

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 inicie llamando al método de envío en el argumento de datos, tal como se explica en la documentación de Opciones para la devolución de llamada (también documentada en el código fuente del enchufar).

por ejemplo, el siguiente código debería 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'');
});

Tenga en cuenta también que el complemento es modular y la versión de IU (utilizada en el ejemplo de descarga) hace uso de las opciones de devolución de llamada que se anularán 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 3

En lugar de,

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

Solía,

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

Y funcionó para mí.

Answer 4

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

$(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
    })
});

Answer 5

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

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

Sin embargo, los siguientes trabajos:

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