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

问题描述

我正在尝试使用插件， 看起来非常有希望。

  var $ uploadButton = $（＃fileop-upload）; //< p> input type =fileid =fileop-upload[etc] /> 
 $ uploadButton.fileupload（{
 url：// domain / path / to / receive-uploaded-files
}）; 
  

所选文件上传正常，无需按预期方式刷新页面，但当然最小配置这个用户不会得到任何通知。这里是插件的回调将派上用场的地方。

根据文档，有两种方法来定义回调。例如，添加事件（只要选择上传文件就会触发）可以添加到原始配置对象中，如下所示：

  $ 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）; 
  

我定义了引用的侦听器函数，并且代码不报告任何错误或警告。 / p>

.bind 方法失败的解释是什么，为什么进度或者 start 侦听器有没有激活过？

解决方案

我是jQuery File Upload插件的作者。

我没有解释为什么第三个示例代码中的fileuploadadd事件不会触发。
但是，如果您重写add callback选项，则必须通过调用数据参数的submit方法来确保文件上传已开始，如（也记录在插件的源代码中）。

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

  $（'＃fileupload'）。fileupload（{
 add：function（e，data）{
 console.log（'add'）; 
 data.submit（）; 
}，
进度：function（e，data） {
 console.log（'progress'）; 
}，
 start：function（e）{
 console.log（'start'）; 
} $ （'datafile）{
 console.log（'fileuploadadd'）; 
}）。bind（'fileuploadprogress'，function（e，data ）{
 console.log（'fileuploadprogress'）; 
}）。bind（'fileuploadstart'，function（e）{
 console.log（'fileuploadstart'）; 
 }）; 
  

还要注意，插件是模块化的，用户界面版本（在下载示例中使用）这个回调选项将被上面的代码覆盖。
这就是为什么事件绑定非常有用，因为它允许定义额外的回调方法，而不会覆盖通过options对象设置的回调。

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

It's really easy to implement:

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.

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

or alternatively:

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

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

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

or

$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.

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

解决方案

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

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

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插件不能触发回调？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！