在plupload ui中成功上传后如何获取/打印文件名

Question

I do not have much knowledge in javascript. I am trying to get and print file name in a input box after a successful upload event. I'm using plupload ui widget. the below script works fine, I can upload files but I cant get file name after the upload finishes. I have googled a lot but couldn't get it working. here is the code I'm using..

// Initialize the widget when the DOM is ready
$(function() {
    $("#uploader").plupload({
        // General settings
        runtimes : 'html5,flash,silverlight,html4',
        url : 'upload.php',

        // User can upload no more then 20 files in one go (sets multiple_queues to false)
        max_file_count: 20,

        chunk_size: '1mb',


        filters : {
            // Maximum file size
            max_file_size : '10mb',
            // Specify what files to browse for
            mime_types: [
            {title : "Image files", extensions : "jpg,gif,png"},
    {title : "Zip files", extensions : "zip"}
        ]
        },

        // Rename files by clicking on their titles
        rename: true,

        // Sort files
        sortable: true,

        // Enable ability to drag'n'drop files onto the widget (currently only HTML5 supports that)
        dragdrop: true,
        prevent_duplicates: true,

        // Views to activate
        views: {
            list: true,
            thumbs: true, // Show thumbs
            active: 'thumbs'
        },

        // Flash settings
        flash_swf_url : 'js/Moxie.swf',

        // Silverlight settings
        silverlight_xap_url : 'js/Moxie.xap'
        });

uploader.bind('FileUploaded' , function(up, file, response ) {
if ( (Uploader.total.uploaded + 1) == Uploader.files.length)
{
alert(File.name);
};
})


    // Handle the case when form was submitted before uploading has finished
    $('form').submit(function(e) {
var uploader = $('#uploader').plupload('getUploader');
        // Files in queue upload them first
        if (uploader.files.length > 0) {
        // When all files are uploaded submit form
            uploader.bind('StateChanged', function() {
if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
                $('form')[0].getlink();
}
            });

            uploader.start();
        } else {
            alert("You must have at least one file in the queue.");
        }
        return false; // Keep the form from submitting
    });
});

Answer 1

You have a faulty conditional in your FileUploaded handler:

if ( (Uploader.total.uploaded + 1) == Uploader.files.length)

Why Uploader.total.uploaded + 1 ? It will never get fulfilled.

Also Plupload UI widget has it's own syntax for attaching handlers to the events.

// Subscribing to the events...
// ... on initialization:
$('#uploader').plupload({
  ...
  viewchanged: function(event, args) {
    // stuff ...
  }
});
// ... or after initialization
$('#uploader').on("viewchanged", function(event, args) {
  // stuff ...
});

Consider the following playground sample .