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

时间:2011-06-08 14:27:10

标签: jquery file-upload callback jquery-file-upload blueimp

我正在尝试使用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);

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

更令人好奇的是,没有其他回调 - 尤其是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听众没有激活?

5 个答案:

答案 0 :(得分:34)

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

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

e.g。以下代码应打印出不同的回调事件:

$('#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对象设置的回调。

答案 1 :(得分:4)

这对我不起作用。

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

答案 2 :(得分:2)

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

答案 3 :(得分:0)

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

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

但是,以下工作:

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

答案 4 :(得分:0)

而不是,

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

我用过,

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

它对我有用。