如何为多个plupload创建一个循环 [英] How to make a loop for multiple 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。我尝试了所有的东西来创建循环，但它似乎不起作用。

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.

此外，此代码用于控制 PLupload

Also, this code is used to control the PLupload

推荐答案

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

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

这篇关于如何为多个plupload创建一个循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！