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

Я экспериментирую с Blueimp 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?

Ответы

Ответ 1

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

У меня нет объяснения, почему событие fileuploadadd в вашем третьем примере кода не срабатывает. Однако, если вы переопределите опцию add callback, вы должны убедиться, что загрузка файла запускается путем вызова метода 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');
});

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

Ответ 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').bind('fileuploadadd', function (e, data) {/* ... */});

И он должен читать

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

Ответ 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
    })
});

Ответ 4

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

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

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

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

Ответ 5

Вместо <

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

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

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

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