Geek asks and answers

Plupload - download completion function?

I looked at some “similar” questions, but none of them worked or did not solve the specific question that I have.

I use Plupload (http://www.plupload.com) to upload images to Amazon S3. This works fine, however, after the download is complete I want to update another div on the page to show thumbnails of the downloaded files. My intention is to use jQuery.load for this (since I will need to run a DB query before I can output them). However, at the moment I'm trying to get the basics to work and just update the div with the text.

My current code (below) does not return any errors, but does not update the div after loading the file (s). Looking at the various answers / suggestions, there seem to be many ways to achieve what I am looking for, but I have not been able to work.

Here is my code right now ...

<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>
+5
source share
2 answers

This is my code that works on my side:

<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>

This example starts the FileUploaded function after all the files in the queue are downloaded.

+8
source

It works better using UploadComplete instead of FileUploaded

+6
source

More articles:


All Articles