How to make a loop for multiple plupload

Question

I have a piece of code like that:

$(function() {
var uploader1 = new plupload.Uploader({
    runtimes : 'gears,html5,flash,silverlight,browserplus',
    browse_button : 'pickfiles1', 
    container : 'container',
    max_file_size : '10mb',
    url : 'upload.php',
    flash_swf_url : '/plupload/js/plupload.flash.swf',
    silverlight_xap_url : '/plupload/js/plupload.silverlight.xap',
    filters : [
        {title : "Image files", extensions : "jpg,gif,png"},
        {title : "Zip files", extensions : "zip"}
    ],
    resize : {width : 320, height : 240, quality : 90}
});

uploader1.bind('Init', function(up, params) {
    $('#filelist1').html("<div>Current runtime: " + params.runtime + "</div>");
});

$('#uploadfiles1').click(function(e) {
    uploader1.start();
    e.preventDefault();
});

uploader1.init();

uploader1.bind('FilesAdded', function(up, files) {
    var temp_img_name = '';
    $.each(files, function(i, file) {
        $('#filelist1').append(
            '<div id="' + file.id + '">' +
            file.name + ' (' + plupload.formatSize(file.size) + ') <b></b> <input type="hidden" name="hdnPictureNameAddtemp" value="' + file.name + '"/>' +
        '</div>');
        if(temp_img_name == ''){
        temp_img_name += file.name;
        } else {
        temp_img_name += ', ' + file.name;
        }

    });
    $('#filelist1').append('<input type="hidden" name="hdnPictureNameAdd" value="' + temp_img_name + '"/>');

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

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

uploader1.bind('Error', function(up, err) {
    $('#filelist1').append("<div>Error: " + err.code +
        ", Message: " + err.message +
        (err.file ? ", File: " + err.file.name : "") +
        "</div>"
    );

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

uploader1.bind('FileUploaded', function(up, file) {
    $('#' + file.id + " b").html("100%");
});
});

My problem is that I want to create a loop because some parts of the code above needs to be changed. In fact, uploader1, filelist1, pickfiles1, uploadfiles1 should be changed. Its last number should increase from 1 to n. I tried every thing to create a loop but it seems not work.

Also, this code is used to control the PLupload

Answer 1

Did not go through the whole logic, but one option should (roughly) be something like this (for 10 uploaders), concatenating the itemIndex to each selector. (watch out for the container item which does not seem to be indexed)

Server side, you may encounter the need to know which uploader triggered the upload. This might be solved, for example, with querystring parameters.

$(function() {
   for (var itemIndex=1, itemIndex<10; itemIndex++)
       initUploader(itemIndex);
});

function initUploader(itemIndex) {
    var uploader1 = new plupload.Uploader({
        runtimes : 'gears,html5,flash,silverlight,browserplus',
        browse_button : 'pickfiles'+itemIndex, 
        container : 'container'+itemIndex,
        max_file_size : '10mb',
        url : 'upload.php',
        flash_swf_url : '/plupload/js/plupload.flash.swf',
        silverlight_xap_url : '/plupload/js/plupload.silverlight.xap',
        filters : [
            {title : "Image files", extensions : "jpg,gif,png"},
            {title : "Zip files", extensions : "zip"}
        ],
        resize : {width : 320, height : 240, quality : 90}
    });

    uploader1.bind('Init', function(up, params) {
        $('#filelist'+itemIndex).html("<div>Current runtime: " + params.runtime + "</div>");
    });

    $('#uploadfiles'+itemIndex).click(function(e) {
        uploader1.start();
        e.preventDefault();
    });

    uploader1.init();

    uploader1.bind('FilesAdded', function(up, files) {
        var temp_img_name = '';
        $.each(files, function(i, file) {
            $('#filelist'+itemIndex).append(
                '<div id="' + file.id + '">' +
                file.name + ' (' + plupload.formatSize(file.size) + ') <b></b> <input type="hidden" name="hdnPictureNameAddtemp" value="' + file.name + '"/>' +
            '</div>');
            if(temp_img_name == ''){
            temp_img_name += file.name;
            } else {
            temp_img_name += ', ' + file.name;
            }

        });
        $('#filelist'+itemIndex).append('<input type="hidden" name="hdnPictureNameAdd" value="' + temp_img_name + '"/>');

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

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

    uploader1.bind('Error', function(up, err) {
        $('#filelist'+itemIndex).append("<div>Error: " + err.code +
            ", Message: " + err.message +
            (err.file ? ", File: " + err.file.name : "") +
            "</div>"
        );

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

    uploader1.bind('FileUploaded', function(up, file) {
        $('#' + file.id + " b").html("100%");
    });
}