Почему плагин BlueQ's jQuery-File-Upload не запускает обратные вызовы?

Question

Я экспериментирую с плагином BlueQ's jQuery-File-Upload , который, судя по demo , выглядит очень многообещающе.

Это действительно легко реализовать:

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

Выбранные файлы загружаются нормально, не обновляя страницу должным образом, но, конечно, при такой минимальной конфигурации пользователь не получит никаких уведомлений.Вот где бы пригодились обратные вызовы плагина.

Согласно документации, существует два способа определения обратных вызовов.Например, событие add (которое запускается при выборе файла для загрузки) может быть добавлено в исходный объект конфигурации следующим образом:

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

или альтернативно:

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

Однако я обнаружил, что работает только первый подход, а второй ничего не делает.

Еще более любопытно, что никакие другие обратные вызовы - особенно progress и start - не кажутсябудь уволен независимо от того, как я их связываю:

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

или

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

У меня есть определенные функции прослушивателя, и код не сообщает об ошибках или предупреждениях.

Чем объясняется ошибка метода .bind, и почему слушатели progress или start никогда не активируются?

Answer 1

Я являюсь автором плагина загрузки файлов jQuery.

У меня нет объяснения, почему не происходит событие fileuploadadd в вашем третьем примере кода.Однако, если вы переопределяете опцию добавления обратного вызова, вы должны убедиться, что загрузка файла начинается, вызывая метод submit для аргумента данных, как объяснено в документации Опции для обратного вызова добавления (а также документированов исходном коде плагина).

например, следующий код должен распечатывать различные события обратного вызова:

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

Обратите также внимание, что плагин является модульным и версия пользовательского интерфейса (используется впример загрузки) использует параметры обратного вызова, которые будут переопределены с помощью приведенного выше кода.Вот почему привязка событий так полезна, поскольку позволяет определять дополнительные методы обратного вызова, не переопределяя обратные вызовы, установленные через объект параметров.

Answer 2

Это не сработало для меня.

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

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

   console.log(e);

   console.log(data);

});

Но это так!

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

   console.log(e);

   console.log(data);

});

Мое первое предположение состоит в том, что в первом случае вы привязываете событие к фактическому вводу формы вместо объекта fileupload, а во втором, используя цепочку, вы фактически используете объект fileupload, я полагаю, документация неоднозначна так как он читает:

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

И это должно читаться

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

Answer 3

Если определено событие добавления, все обратные вызовы процесса не сработают.

$(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 4

Вместо

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

Я использовал

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

, и у меня это сработало.

Answer 5

Не уверен, решит ли это вашу проблему или нет, но для меня не работает следующее (должно работать в соответствии с документацией:

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

Однако работает следующее:

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