How to use multiple instances of plupload on single form

Question

I want to use multiple instances of plupload on single form. I saw the following link. But i dnt know how to implement that in wordpress.

jsfiddle.net/X65zF/36/.

So I can upload images from first upload link, then documents from second upload link etc..

This is my html code

<a id="aaiu-uploader" class="aaiu_button" href="#"><?php _e('*Select Images 
(mandatory)','wpestate');?></a>
                    <input type="hidden" name="attachid" id="attachid" value="<?php
 echo $attachid;?>">
                    <input type="hidden" name="attachthumb" id="attachthumb" value="<?
 php echo $thumbid;?>"> 

This is my js code

   jQuery(document).ready(function($) {
   "use strict";

    if (typeof(plupload) !== 'undefined') {


        var uploader = new plupload.Uploader(ajax_vars.plupload);

        uploader.init();

        uploader.bind('FilesAdded', function (up, files) {

            $.each(files, function (i, file) {
             //   console.log('append'+file.id );


                $('#aaiu-upload-imagelist').append(
                    '<div id="' + file.id + '">' +
                        file.name + ' (' + plupload.formatSize(file.size) + ') <b></b>' 
  +
                        '</div>');
            });

            up.refresh(); // Reposition Flash/Silverlight
            uploader.start();
        });




                       uploader.bind('UploadProgress', function (up, file) {
            $('#' + file.id + " b").html(file.percent + "%");
        });



        // On erro occur
        uploader.bind('Error', function (up, err) {
            $('#aaiu-upload-imagelist').append("<div>Error: " + err.code +
                ", Message: " + err.message +
                (err.file ? ", File: " + err.file.name : "") +
                "</div>"
            );
            up.refresh(); // Reposition Flash/Silverlight
        });



        uploader.bind('FileUploaded', function (up, file, response) {

            var result = $.parseJSON(response.response);
           // console.log(result);

            $('#' + file.id).remove();
            if (result.success) {               
                $('#profile-image').css('background-image','url("'+result.html+'")');
                $('#profile-image').attr('data-profileurl',result.html);
                $('#profile-image_id').val(result.attach);

                var all_id=$('#attachid').val();
                all_id=all_id+","+result.attach;
                $('#attachid').val(all_id);
                $('#imagelist').append('<div class="uploaded_images" data- 
 imageid="'+result.attach+'"><img src="'+result.html+'" alt="thumb" /><i class="fa 
 deleter fa-trash-o"></i> </div>');
                delete_binder();
                thumb_setter();
            }
        });


        $('#aaiu-uploader').click(function (e) {
                  uploader.start();
                  e.preventDefault();
              });

        $('#aaiu-uploader2').click(function (e) {
                  uploader.start();
                  e.preventDefault();
              });


 }

 });

Suggest something...Anyone has done this kind of thing??

Answer 1

Try this solution.You can have n number of instances with this.

Plupload multiple instances