Javascript 在表单提交时使用多实例提交的plUpload

我在这里和其他网站上看到了许多plUpload的例子。我从这些示例中获取了代码，并使用了不同的表单，但没有一个能完全满足我的要求——祝你们好运，你们能帮我找到解决方案

我目前有一个数据输入表单，由表行组成，每行允许上传一个图像。此表单将提交到PHP并存储图像/数据

我想将图像上传例程转移到plUpload上，以便更好地与更老/更多的浏览器配合使用，并允许客户端图像调整大小等

据我所见，我需要混合使用核心plUpload和jQuery模块，以允许通过类而不是id绑定实例，但我走了这条路，遇到了困难。我现在正在看这里找到的另外两段代码（对不起，我忘记了作者的名字），并得出以下结论

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="../js/plupload.full.min.js"></script>

<form id="form" action="" multipart method="post">
    <div id="container1" class="gallery">
        <a id="pickfiles1" href="javascript:;">[Select files]</a>
        <a id="uploadfiles1" href="javascript:;">[Upload files]</a>
    </div>

    <div id="container2" class="gallery">
        <a id="pickfiles2" href="javascript:;">[Select files]</a>
        <a id="uploadfiles2" href="javascript:;">[Upload files]</a>
    </div>
    <input type="submit" /></input>
</form>

<p><label>Debug data:</label><div id="debug"></div></p>

<div id="uploaded"></div>


<script>
function initUploader(itemIndex) {
        var uploader1 = new plupload.Uploader({
            runtimes: 'html5,html4,flash,silverlight,browserplus',
            browse_button: 'pickfiles'+itemIndex, 
            container: 'container'+itemIndex,
            max_file_size: '10mb',
            max_retries: 3,
            chunk_size: '1mb',
            url: 'upload.php',
            unique_names: false,
            preserve_headers: false,
             flash_swf_url: 'http://www.plupload.com/plupload/js/plupload.flash.swf',
                silverlight_xap_url: 'http://www.plupload.com/plupload/js/plupload.silverlight.xap',
                filters: [
                    {
                    title: "Image files",
                    extensions: "jpg,gif,png"}
                ],
            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('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('FilesAdded', function(up, files) {
                $.each(files, function(i, file) {
                    $('#debug').prepend('Uploading ' + file.name + ' (' + file.size + ' bytes)');
                });
               // up.refresh();
              //  up.start();
            });


        uploader1.bind('FileUploaded', function(up, file) {
           // $('#' + file.id + " b").html("100%");
            $('#uploaded').prepend('<p><a href="' + public_url + file.name + '" target="_blank"><img src="' + public_url + file.name + '" width="100"/></a></p>');
        });
    }



    $('#form').submit(function(e) {
        // Files in queue upload them first
        alert("Submit");
         var uploader = $('#container2').plupload('getUploader');
            // Validate number of uploaded files
            if (uploader.total.uploaded == 0)
            {
                // Files in queue upload them first
                if (uploader.files.length > 0)
                {
                    // When all files are uploaded submit form
                    uploader.bind('UploadProgress', function ()
                    {
                         $('#uploader1').on('complete', function() {
                                alert("Complete - wait for rest");
                                $('#form').submit(); 
                             });
                    });

                   $('#uploader1').plupload('start');
                } else { $('#form').submit();}
                    //alert('You must at least upload one file.');
                e.preventDefault();
            } else { $('#form').submit();}



    });

initUploader(1);
initUploader(2);

</script>

调试数据：

函数initUploader（itemIndex）{
var uploader1=新的plupload.Uploader({
运行时：“html5、html4、flash、silverlight、browserplus”，
浏览按钮：“pickfiles”+itemIndex，
容器：“容器”+itemIndex，
最大文件大小：“10mb”，
最大重试次数：3次，
块大小：“1mb”，
url:'upload.php'，
唯一名称：false，
保留标题：false，
flash_swf_url:'http://www.plupload.com/plupload/js/plupload.flash.swf',
silverlight_xap_url:'http://www.plupload.com/plupload/js/plupload.silverlight.xap',
过滤器：[
{
标题：“图像文件”，
扩展名：“jpg、gif、png”}
],
调整大小：{宽度：320，高度：240，质量：90}
});
uploader1.bind（'Init'，函数（up，params）{
$（'#filelist'+itemIndex）.html（“当前运行时：+params.runtime+”）；
});
$（“#上载文件”+项目索引）。单击（函数（e）{
uploader1.start（）；
e、 预防默认值（）；
});
uploader1.init（）；
uploader1.bind（'UploadProgress'，函数（up，file）{
$（'#'+file.id+“b”）.html（file.percent+“%”）；
});
uploader1.bind（'Error'，函数（up，err）{
$（“#文件列表”+itemIndex）.append（“错误：+err.code+
，消息：“+err.Message”+
（err.file？”，文件：“+err.file.name:”）+
""
);
up.refresh（）；//重新定位Flash/Silverlight
});
uploader1.bind（'FilesAdded'，函数（up，files）{
$.each（文件、函数（i、文件）{
$（'#debug'）.prepend（'Uploading'+file.name+'（'+file.size+'bytes'））；
});
//up.refresh（）；
//up.start（）；
});
uploader1.bind（'FileUploaded'，函数（up，file）{
//$（'#'+file.id+“b”）.html（“100%”）；
$（“#上传”）。前置（“
”）；
});
}
$（'表格'）。提交（功能（e）{
//队列中的文件首先上载它们
警报（“提交”）；
var uploader=$（'#container2'）.plupload（'getUploader'）；
//验证上载的文件数
if（uploader.total.uploader==0）
{
//队列中的文件首先上载它们
如果（uploader.files.length>0）
{
//上传所有文件后，提交表单
uploader.bind（'UploadProgress'，函数（）
{
$（'#uploader1'）。在（'complete'，function（）上{
警报（“完成-等待休息”）；
$（'表格'）.submit（）；
});
});
$（'#uploader1'）。plupload（'start'）；
}else{$（'#form'）.submit（）；}
//警报（'您必须至少上载一个文件'）；
e、 预防默认值（）；
}else{$（'#form'）.submit（）；}
});
初始化上传器（1）；
初始化上传器（2）；

该例程将允许我选择文件，但我无法在表单提交中提交它们

如果您能帮我指出正确的方向，我们将不胜感激