为什么Blueimp的jQuery-File-Upload插件不会触发回调？

Question

我正在试验Blueimp'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 File Upload插件的作者。

我没有解释为什么第三个示例代码中的fileuploadadd事件不会触发。 但是，如果您重写add callback选项，则必须确保通过调用数据参数的submit方法来启动文件上载，如添加回调的Options documentation中所述（也记录在插入）。

例如下面的代码应该打印出不同的回调事件：

$('#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版本（下载示例中使用）利用了其将与上面的代码重写回调选项。 这就是事件绑定非常有用的原因，因为它允许定义其他回调方法而不会覆盖通过选项对象设置的回调。

Answer 2

不知道这样能否解决您的问题或没有，但对我来说，以下不工作（每文档应该工作：

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

但是，下面的工作：

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

Answer 3

这并没有为我工作。

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

相反的，

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

我用，

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

，它为我工作。

Answer 5

如果定义了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 
    }) 
});