为什么Blueimp的jQuery-File-Upload插件没有激活回调?

我正在尝试使用Blueimp的jQuery-File-Upload插件,该插件根据演示看起来很有前途。

这很容易实现:

var $uploadButton = $("#fileop-upload");//  $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); 

但是我发现只有第一种方法有效,第二种方法没有做任何事情。

更令人好奇的是,没有其他回调 – 特别是progressstart – 似乎无论我如何绑定它们都会解雇:

 $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方法失败的原因是什么?为什么progressstart侦听器不会激活?

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

我没有解释为什么第三个示例代码中的fileuploadadd事件不会触发。 但是,如果覆盖add callback选项,则必须通过调用data参数的submit方法来确保启动文件上载,如添加回调的Options文档中所述(并且还记录在源代码中)插入)。

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

 $('#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版本(在下载示例中使用)使用了回调选项,这些选项将被上面的代码覆盖。 这就是事件绑定如此有用的原因,因为它允许定义其他回调方法而不会覆盖通过options对象设置的回调。

这对我不起作用。

 $('#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) {/* ... */}); 

如果定义了add事件,则不会触发所有进程回调。

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

代替,

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

我用了,

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

它对我有用。

不确定这是否解决了您的问题,但对我来说,以下方法不起作用(应该按照文档工作:

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

但是,以下工作:

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