javascript - Plupload - アップロード完了時の機能

Question

「同様の」質問をいくつか閲覧してきましたが、私が抱えている特定の問題を解決したり解決したりするものはありません。

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>

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

FileUploaded の代わりに UploadComplete を使用するとうまく機能します