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

时间:2013-06-16 22:37:25

标签: php javascript loops plupload

我有一段代码:

$(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

1 个答案:

答案 0 :(得分:0)

没有完成整个逻辑,但是一个选项应该(粗略地)是这样的(对于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%");
    });
}