Plupload - 上传完成后的功能？

Question

Plupload - 上传完成后的功能？

6

我浏览了一些“类似”的问题，但是没有一个能解决我遇到的特定问题。

我正在使用Plupload（http://www.plupload.com）将图片上传到Amazon S3。这很好用，但是一旦上传完成，我想要更新页面上的另一个div以显示上传文件的缩略图。我的意图是使用jQuery.load来做到这一点（因为我需要运行DB查询才能输出它们）。但是，现在我正在尝试让基本功能正常工作，并简单地更新div文本。

当前的代码（如下）没有返回任何错误，但是一旦文件上传，它就无法更新div。查看各种答案/建议，似乎有许多实现我所需要的方法 - 但我没有能够使它们工作。

以下是我的目前代码...

<script>
$(document).ready(function(upload) {
$("#uploader").pluploadQueue({
    runtimes : 'html5,html4',
    url : '/gallery/upload.cfm',
    max_file_size : '5000kb',
    multiple_queues : true,
    unique_names : true,
    filters : [
        {title : "Image files", extensions : "jpg,gif,png,jpeg"}
    ]
});
$("#uploader").bind('FileUploaded', function() {
$(".outputimages").html('The output goes here');
});
});
</script>

<div id="uploader">You browser doesn't have HTML 4 support.</div> 

<div class="outputimages"></div>

- Lee

谢谢回复。我不需要访问文件名，我只想在上传完成后触发另一个函数（即更新页面上的另一个div）-实际上传的文件是无关紧要的。 - Lee

所有上传都完成后？ - Cybrix

理想情况下是这样的，但每个单独的触发后再执行也不会有什么坏处。 - Lee

尝试将脚本的第二部分替换为以下内容：

var uploader = $('#uploader').pluploadQueue(); uploader.bind('FileUploaded', function() { $(".outputimages").html('输出在此处'); });

事件需要在pluploadQueue引用上使用，而不是已绑定到pluploadQueue的$(obj)。 - Cybrix

好的，你是对的，即使我没有从后端返回任何消息，我的代码也可以工作。JSON字符串 {"jsonrpc": "2.0", "result": null, "id": "id"} 最终似乎是可选的，除非出现错误。 - Cybrix

显示剩余5条评论

2个回答

7

使用UploadComplete而不是FileUploaded可以更好地工作。

- kinsay

你似乎了解这个系统的工作原理，能否帮我看一下这个问题？https://dev59.com/2XLYa4cB1Zd3GeqPTx0U，谢谢！ - Tony M

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Cybrix · Accepted Answer

这是我的代码，目前在我的这边可以正常工作：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="plupload/jquery.plupload.queue.js"></script>
<script src="plupload/plupload.full.js"></script>
<script>
    $(function() {
        $("#uploader").pluploadQueue({
            runtimes : 'html5,html4',
            max_file_size : '10mb',
            url : 'upload.php',
            max_file_size : '5000kb',
            multiple_queues : true,
            unique_names : true,
            filters : [
                {title : "Image files", extensions : "jpg,gif,png,jpeg"}
            ]
        });

        var uploader = $('#uploader').pluploadQueue();

        uploader.bind('FileUploaded', function() {
            if (uploader.files.length == (uploader.total.uploaded + uploader.total.failed)) {
                $(".outputimages").html('The output goes here');
            }
        });
    });
</script>

<div id="uploader">You browser doesn't have HTML 4 support.</div> 

<div class="outputimages"></div>

在队列中的所有文件上传完成后，此示例会触发FileUploaded函数。