plUpload与多个实例提交表单提交

时间:2015-04-07 15:33:53

标签: javascript php jquery 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>

例程将允许我selet文件,但我不能在表单提交上提交..

任何帮助指明我正确方向的人都将不胜感激。

0 个答案:

没有答案