Question

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

我正在使用Plupload（http://www.plupload.com）将图像上传到Amazon S3。这很好用，但是一旦上传完成，我想更新页面上的另一个div以显示上传文件的缩略图。我的目的是使用jQuery.load来执行此操作（因为我需要在输出之前运行数据库查询）。但是，现在我正试图让基础知识正常工作，只需用文本更新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>

Answer 1

这是我的代码，正在我这边工作：

<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函数。

Answer 2

使用UploadComplete而不是FileUploaded

可以更好地工作

Plupload - 上传完成功能？

2 个答案: