jQuery文件上传插件不调用成功回调

Posted

技术标签:

【中文标题】jQuery文件上传插件不调用成功回调【英文标题】:jQuery file upload plugin not calling success callback 【发布时间】:2012-10-05 04:04:14 【问题描述】:

我正在使用 jQuery 文件上传插件,一旦文件上传完成,我想做一些自定义 jQuery 的东西

从这里https://github.com/blueimp/jQuery-File-Upload/wiki/Options

现在是这样的

Callback for successful upload requests.
$('#fileupload')
       .bind('fileuploaddone', function (e, data) /* ... */)

现在我已经定义了这个自定义函数,用于在我自己的 js 文件中进行测试

$('#fileupload').bind('fileuploaddone', function (e, data) /* ... */
alert('Hello');
)

但它不起作用。

但是如果我在这里编辑主文件

  // Callback for successful uploads:
            done: function (e, data) 

然后就可以了。

【问题讨论】:

你的 fileupload 元素是否也有 id "fileupload"? 【参考方案1】:

检查服务器端上传脚本是否返回 JSON 回复 - 在我的情况下,当回复为空时它不起作用,但文件已成功上传。

所以,下面是为我工作的 jQuery 1.9.1 和“jQuery 文件上传插件”的最新版本 - 5.21.3

$("#fileupload").bind("fileuploaddone", function (e, data) 
    console.log("fileuploaddone event fired");
);

【讨论】:

我还注意到 done: 如果您的服务器没有返回 JSON,回调将不会触发。【参考方案2】:

查看库代码,似乎所有事件都被重命名为删除'fileupload'......所以'fileuploaddone'变成了'done'。它适用于所有其他回调。 看看这个部分:

    // Other callbacks:
    // Callback for the submit event of each file upload:
    // submit: function (e, data) , // .bind('fileuploadsubmit', func);
    // Callback for the start of each file upload request:
    // send: function (e, data) , // .bind('fileuploadsend', func);
    // Callback for successful uploads:
    // done: function (e, data) , // .bind('fileuploaddone', func);
    // Callback for failed (abort or error) uploads:
    // fail: function (e, data) , // .bind('fileuploadfail', func);
    // Callback for completed (success, abort or error) requests:
    // always: function (e, data) , // .bind('fileuploadalways', func);
    // Callback for upload progress events:
    // progress: function (e, data) , // .bind('fileuploadprogress', func);
    // Callback for global upload progress events:
    // progressall: function (e, data) , // .bind('fileuploadprogressall', func);
    // Callback for uploads start, equivalent to the global ajaxStart event:
    // start: function (e) , // .bind('fileuploadstart', func);
    // Callback for uploads stop, equivalent to the global ajaxStop event:
    // stop: function (e) , // .bind('fileuploadstop', func);
    // Callback for change events of the fileInput(s):
    // change: function (e, data) , // .bind('fileuploadchange', func);
    // Callback for paste events to the pasteZone(s):
    // paste: function (e, data) , // .bind('fileuploadpaste', func);
    // Callback for drop events of the dropZone(s):
    // drop: function (e, data) , // .bind('fileuploaddrop', func);
    // Callback for dragover events of the dropZone(s):
    // dragover: function (e) , // .bind('fileuploaddragover', func);

如果您对正在发生的事情有一些疑问,请查看里面的代码。这个库没有压缩,所以很容易看到。例如

// start: function (e) , // .bind('fileuploadstart', func);

start 回调已实现。 fileuploadstart 不是。

【讨论】:

以上是关于jQuery文件上传插件不调用成功回调的主要内容,如果未能解决你的问题,请参考以下文章

可拖拽和带预览图的jQuery文件上传插件ssi-uploader

Jquery自定义图片上传插件

javascript 上传文件到阿里云的oss,上传文件成功后怎么获取文件的真实路径?

jQuery的ajaxFileUpload上传文件插件刷新一次才能再次调用触发change

ASP.Net MVC 使用 jquery-form 插件上传文件并返回 Json 结果

如何使用简单的 jquery-ajax 调用上传文件