为什么 Blueimp 的 jQuery-File-Upload 插件不触发回调? [英] Why doesn't Blueimp's jQuery-File-Upload plugin fire callbacks?

问题描述

我正在试验 Blueimp 的 jQuery-File-Upload 插件，根据演示看起来很有前景.

I'm experimenting with Blueimp's jQuery-File-Upload plugin, which judging by the demo looks very promising.

实现起来真的很容易:

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

选定的文件上传正常，而不会按预期刷新页面，但当然，像这样的最小配置用户不会收到任何通知.这是插件的回调可以派上用场的地方.

The selected files are uploaded fine without refreshing the page as expected, but of course with a minimal configuration like this the user won't get any notification. Here's where the plugin's callbacks would come in handy.

根据文档，有两种定义回调的方法.For example the add event (which fires whenever a file is selected for uploading) can be added in the original configuration object like this:

According to the documentation there are two ways to define callbacks. For example the add event (which fires whenever a file is selected for uploading) can be added in the original configuration object like this:

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

或者:

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

但是我发现只有第一种方法有效，第二种方法不起作用.

However I've found that only the first approach works, the second one doesn't do anything.

更奇怪的是，无论我如何绑定它们，似乎都没有其他回调 - 特别是 progress 和 start - 似乎正在触发:

It is even more curious that no other callbacks -- especially progress and start -- seems to be firing not matter how I bind them:

$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");

我定义了引用的侦听器函数，代码没有报告任何错误或警告.

I have the referred listener functions defined, and the code doesn't report any errors or warnings.

.bind 方法失败的原因是什么，为什么 progress 或 start 侦听器从未激活?

What is the explanation for the .bind method's failure, and why doesn't the progress or the start listeners ever activate?

推荐答案

我是 jQuery 文件上传插件的作者.

I'm the author of the jQuery File Upload plugin.

我没有解释为什么您的第三个示例代码中的 fileuploadadd 事件没有触发.但是，如果您覆盖 add 回调选项，则必须确保通过调用 data 参数上的 submit 方法开始文件上传，如 选项文档 用于添加回调(也记录在插件的源代码中).

I don't have an explanation why the fileuploadadd event in your third example code doesn't fire. However, if you override the add callback option, you have to make sure the file upload is started by calling the submit method on the data argument, as explained in the Options documentation for the add callback (and also documented in the source code of the plugin).

例如以下代码应打印出不同的回调事件:

e.g. the following code should print out the different callback events:

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

另请注意，该插件是模块化的，并且 UI 版本(在下载示例中使用)使用了回调选项，这些选项将被上述代码覆盖.这就是事件绑定如此有用的原因，因为它允许定义额外的回调方法而无需覆盖通过选项对象设置的回调.

Note also that the plugin is modular and the UI version (used in the download example) makes use of the callback options which would be overridden with the above code. That's why the event binding is so useful, as it allows to define additional callback methods without overriding the callbacks set via the options object.

这篇关于为什么 Blueimp 的 jQuery-File-Upload 插件不触发回调?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！