通过Jquery ajax上传多个视频文件的多个进度条

Question

我遇到了一个问题，我需要从远程服务器上传视频文件并显示上传文件的进度。如果我同时上传多个视频文件的URL，则视图应显示多个进度条以及上传进度。我不知道该怎么做。

我有一个生成单个进度条的代码。

我的ajax代码

function remote_up()
    {

        var links = [];
        $.each($('#comment').val().split(/\n/), function (i, line) {
            if (line) {
                links.push(line);
            } else {
                links.push("");
            }
        });
        //alert(links);return false;
        $.ajax({

                 'url'      :  '<?php echo base_url(); ?>'+"Test/remote_upload",
                 'type'     : 'POST', //the way you want to send data to your URL
                 'data'     : {'links' : links},
                 'xhr'      : function ()
                                {
                                    var jqXHR = null;
                                    if ( window.ActiveXObject )
                                    {
                                        jqXHR = new window.ActiveXObject( "Microsoft.XMLHTTP" );
                                    }
                                    else
                                    {
                                        jqXHR = new window.XMLHttpRequest();
                                    }
                                    //Upload progress
                                    jqXHR.upload.addEventListener( "progress", function ( evt )
                                    {
                                        if ( evt.lengthComputable )
                                        {
                                            var percentComplete = Math.round( (evt.loaded * 100) / evt.total );
                                             $('#progress').css('background-color', 'green')
                                                            .css('width', +percentComplete+'%');
                                             $("#progress").html(percentComplete + '%');
                                            // $("#progress").width(percentComplete);
                                            //Do something with upload progress     
                                            console.log( 'Uploaded percent', percentComplete );
                                        }
                                    }, false );

                                    return jqXHR;
                                },
                 'success'  : function(data){ //probably this request will return anything, it'll be put in var "data"

                                if(data == 0)
                                {
                                    $.blockUI({ 
                                              message: 'Uploading File.....',
                                              css: { 
                                                border: 'none', 
                                                padding: '15px', 
                                                backgroundColor: '#000', 
                                                '-webkit-border-radius': '10px', 
                                                '-moz-border-radius': '10px', 
                                                opacity: '.5', 
                                                color: '#fff',
                                                fontSize: '18px',
                                                fontFamily: 'Verdana,Arial',
                                                fontWeight: 200,
                                            } }); 

                                    setTimeout($.unblockUI, 2000); 
                                    $('.help-block-error').html('Successfully Uploaded');
                                    $('p .help-block-error').fadeIn(3000);
                                     $("#progress").hide();

                                }

                                $('#comment').val('');
                                 console.log( 'Completed.' );

                        }
                 });

    }
    /*EOF function remote upload*/

我的HTML视图

<div class="form-group">
            <textarea name="links" class="form-control" rows="7" id="comment" placeholder="Insert your links (1line = 1 link)"></textarea>
                                        </div>
 <div class="col-md-6 text-right"><button type="submit" onclick="remote_up();" class="submit-2">Submit</button></div>

<div class="w3-light-grey w3-tiny">
                                <div class="w3-container w3-green" id="progress" ></div>
                            </div> 

为了上传视频文件，我在控制器功能中使用了copy命令。

控制器功能

function test()
{
      $remote_url   =   $_POST['links'];
        //$filesizes    =   array();
        foreach($remote_url as $r_url)
        {
            $url        =   $r_url;
            $file1      =   basename($url);
            $file_name  =   getFileName($file1);
            $path       =   $_SERVER['DOCUMENT_ROOT'].'/pandaload/testuploads/';
            if(!copy($url,$path.'/'.$file_name)) {
                // die('Failed to copy file');
                echo "Failed to copy file";
            }
            else
            {
                echo "File Uploaded";
            }
}

请帮我解决这个问题。提前谢谢。