如何为多个plupload创建一个循环

Question

我有一段这样的代码：

$(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%");
});
});

我的问题是我想创建一个循环，因为上面代码的某些部分需要更改。其实uploader1、filelist1、pickfiles1、uploadfiles1应该改了。它的最后一个数字应该从 1 增加到 n。我尝试了所有方法来创建一个循环，但它似乎不起作用。

另外，此代码用于控制PLupload

Answer 1

没有遍历整个逻辑，但一个选项应该（大致）是这样的（对于 10 个上传者），将 itemIndex 连接到每个选择器。 （注意似乎没有被索引的容器项）

服务器端，你可能会遇到需要知道是哪个上传者触发了上传。例如，这可以通过查询字符串参数来解决。

$(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%");
    });
}