16

我正在尝试使用Blueimp 的 jQuery-File-Upload插件，从演示来看，它看起来很有希望。

这很容易实现：

var $uploadButton = $("#fileop-upload");// <input type="file" id="fileop-upload" [etc] />
$uploadButton.fileupload({
    url : "//domain/path/to/receive-uploaded-files"
});

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

根据文档，有两种定义回调的方法。For example the addevent (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"
});

或者：

$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，为什么 theprogress或startlistener 没有激活？

4

5 回答 5

34

我是 jQuery File Upload 插件的作者。

我没有解释为什么您的第三个示例代码中的 fileuploadadd 事件没有触发。但是，如果您覆盖 add callback 选项，您必须确保文件上传是通过调用 data 参数的 submit 方法来启动的，如 Add callback 的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 版本（在下载示例中使用）使用了回调选项，这些选项将被上述代码覆盖。这就是事件绑定如此有用的原因，因为它允许在不覆盖通过选项对象设置的回调的情况下定义额外的回调方法。

于 2011-08-07T15:26:12.327 回答
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) {/* ... */});
于 2013-10-07T22:58:28.560 回答
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
    })
});
于 2015-10-19T13:42:39.593 回答
0

不确定这是否解决了您的问题，但对我来说，以下内容不起作用（应该按照文档工作：

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

但是，以下工作：

$uploadButton.bind 'change', (e, data) =>
  # Do something
于 2012-05-15T20:21:38.983 回答
0

代替，

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

我用了，

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

它对我有用。

于 2014-06-03T14:23:23.660 回答