jquery 文件上传插件：如何使用回调？答案

【问题标题】：jquery file upload plugin: how to use callbacks?jquery 文件上传插件：如何使用回调？
【发布时间】：2014-11-05 08:21:42
【问题描述】：

我正在尝试从 https://github.com/blueimp/jQuery-File-Upload/ 实现蓝色 imp jquery 文件上传插件，正如经常所说的，文档已经非常详细，但对于我作为 jquery 的初学者来说并不是很容易理解。

我想我基本上可以说几乎为零的 jquery 经验，所以如果有人可以帮助我或给我一个他，我会很高兴！

我已尝试按照 wiki 中的方式设置基本实现，并将以下内容保存为 index.html：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
</head>

<body>

<input id="fileupload" type="file" name="files[]" multiple>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script>

$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        url: 'server/php/',
        done: function (e, data) {
            $.each(data.result, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
        }
    });
});

</script>

</body> 
</html>

我想做的是在同一页面上显示已上传的图像。我认为上传完成后我需要在回调中执行此操作。但是，我不知道将代码放在哪里...

所以，为了找出放置任何代码的位置，我只是尝试获取一个警告框并添加此代码 |更新：现在可以使用：

$('#fileupload').bind('fileuploaddone', function (e, data) {alert("Message","Titel")});

我也尝试过简单使用（更新：还是不行）：

$('#fileupload').fileupload('disable');

正如wiki中所说，但没有效果。

我是否在错误的地方使用了代码？我猜代码本身应该没问题...

提前感谢您的任何提示！

【问题讨论】：

标签： jquery jquery-plugins

【解决方案1】：

如果您绑定到“fileuploadcompleted”，那么您可以在上传图片时触发操作。

这可以通过将绑定链接到文件上传的末尾来完成。例如：

$('#fileupload').fileupload({
    dataType: 'json',
    url: 'server/php/',
    done: function (e, data) {
        $.each(data.result, function (index, file) {
            $('<p/>').text(file.name).appendTo(document.body);
        });
    }
}).bind('fileuploadcompleted', function (e, data) {alert("Message","Title")});

或者在你的文件上传函数调用下面的任何地方使用：

$('#fileupload').bind('fileuploadcompleted', function (e, data) {alert("Message","Title")});

【讨论】：

【解决方案2】：

您可以使用fileuploadprogressall 回调函数并比较加载的数据和总数据：

$('#fileupload').fileupload({
  ...
}).bind('fileuploadprogressall', function (e, data) {
        if(data.loaded==data.total) {
             console.log("All photos have been done");
        }
});

【讨论】：