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

Question

我正在尝试使用Blueimp的jQuery-File-Upload插件，根据演示来看，它看起来非常有前途。

它的实现真的很容易:

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监听器为什么不会激活？请解释。

- Wabbitseason

---

我正在与blueimp上传回调函数作斗争，尝试实现一个类似swfUpload的基于Flash的组件，仅用于处理文件选择对话框，以将多个文件选择添加到IE中。 - nathanchere

只是出于好奇，你能确认一下你正在使用的jQuery和uploader版本吗？我正在使用jQ 1.5.2和上传插件的4.4.2版本。 - nathanchere

我使用了最新的jQuery和上传插件版本。不过，目前我已经放弃了这个插件，并开发了一个纯基于File API的解决方案（http://blog.new-bamboo.co.uk/2010/7/30/html5-powered-ajax-file-uploads）。这个解决方案只适用于FF4+、Chrome和Safari，但幸运的是，它现在对我的目的来说是可接受的。 - Wabbitseason

Answer 1

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

我不知道为什么你的第三个示例代码中的fileuploadadd事件没有触发。 然而，如果你覆盖了添加回调选项，你必须确保通过在数据参数上调用submit方法来启动文件上传，正如添加回调的选项文档所解释的那样（也在插件的源代码中记录）。

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

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

- Sebastian Tschan

---

我添加了以下代码： .bind('fileuploadsubmit', function (e, data) { console.log("fileuploadsubmit");但是，它没有触发... - efirat

如果和我一样的话，请确保您的<form>标签包含在控件中，用于添加文件的input必须包含在表单内。当我想到这个问题时，这是有道理的。 - user692942

太好了，我找到了这个！文档说fileuploadadded（https://github.com/blueimp/jQuery-File-Upload/wiki/Options） - ocergynohtna

对于谷歌工程师来说，另一件事是处理程序必须在目标元素呈现后附加。使用.bind()或.live()是行不通的。 - Chad Hedgcock

@Sebastian Tscahan，请帮我解决这个问题（这是我第二次向您寻求帮助）https://stackoverflow.com/questions/50974530/why-all-the-process-function-is-not-firing-for-fileupload-plugin - user5405873

Answer 2

这对我没有起作用。

$('#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').bind('fileuploadadd', function (e, data) {/* ... */});

而且它应该读作

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

- Gabriel Acosta

Answer 3

如果定义了添加事件，则所有的过程回调都不会触发。

$(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
    })
});

- user1032531

Answer 4

不确定这是否解决了你的问题，但对于我来说，以下内容无法正常工作（根据文档应该可以工作）：

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

然而，以下代码可以正常工作：

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

- Param

Answer 5

不是，

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

我使用了，

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

对我来说它起作用了。

- user2557841