Question

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

我也试过简单地使用（UPDATE：仍然不起作用）：

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

正如维基中所述，但没有效果。

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

提前感谢任何提示！

Answer 1

您可以使用fileuploadprogressall回调函数并在已加载数据和总数据中进行比较：

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

Answer 2

如果绑定到'fileuploadcompleted'，则可以在上传图像时触发操作。

这可以通过将绑定链接到文件上载的末尾来完成。 e.g：

$('#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函数调用之下的任何地方使用：

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

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

2 个答案: