Как сделать петлю для нескольких 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%"); 
    }); 
}