为什么Blueimp的jQuery文件上传插件不能回调?

我正在试验 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"
});

选定的文件上传到没有按预期的方式刷新页面,但当然这样的最小配置,用户不会得到任何通知。这里是插件的回调会派上用场的地方。

根据文档,有两种方法来定义回调。例如,添加事件(在选择上传文件时触发)可以在原始配置对象中添加,如下所示:

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

或者:

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

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

更好奇的是,没有其他的回调 – 特别是进步和开始 – 似乎正在发射,不管我如何约束它们:

$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方法的失败的解释,为什么进程或开始的侦听器不会激活?

解决方法

我是jQuery File Upload插件的作者。

我没有解释为什么第三个示例代码中的fileuploadadd事件不会触发。
但是,如果覆盖添加回调选项,则必须通过调用数据参数中的提交方法来确保文件上传是开始的,如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',data) {
    console.log('fileuploadprogress');
}).bind('fileuploadstart',function (e) {
    console.log('fileuploadstart');
});

还要注意,该插件是模块化的,UI版本(在下载示例中使用)使用将被上述代码覆盖的回调选项。这就是为什么事件绑定是如此有用,因为它允许定义额外的回调方法,而不会覆盖通过选项对象设置的回调。

相关文章

jQuery插件的种类 1、封装对象方法 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进...
扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间。 入门 编写一个jQuery插件开始于给...
最近项目中需要实现3D图片层叠旋转木马切换的效果,于是用到了jquery.roundabout.js。 兼容性如图: ht...
一、什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异...
AMD 模块 AMD(异步模块定义,Asynchronous Module Definition)格式总体的目标是为现在的开发者提供一...