使用jQuery AJAX和PHP创建智能远程上载脚本

我目前正在创建一个图像托管脚本,到目前为止一直很好.我使用了几个插件来创建本地上传过程,使用drag&drog + AJAX完全正常.现在我已经转移到需要使用jQuery AJAX和PHP脚本来创建远程上传过程的部分来处理整个事情.

它将如何运作

我的想法是这样的:页面中间有一个大框,可以接受远程上传的URL.一旦有效的 URL传递到文本区域,它们将立即通过jQuery AJAX发送到服务器端脚本.它与keyup事件有关.

这就是它的样子: http ://i.imgur.com/NhkLKii.png.
该"来到这里的URL"部分已经是一个文本区域-所以这部分的已经做了.

我需要帮助的地方

整个情况的问题是:一旦有有效的URL粘贴到文本区域,必须立即将这些URL转换为某种类型的框,其中还包括上载进度.看起来像这样的东西(从本地上传部分复制):http://i.imgur.com/q7RyDmb.png

很容易实现本地上传的进度指示器,因为它是我使用的插件提供的功能,但我不知道如何指示远程上传的进度,这完全是从头开始的.

所以这就是我想象的逻辑流程:

用户将一些URL粘贴到文本区域

有一个客户端检查来验证粘贴的URL

验证的URL发送到upload.php on keyup (？)

正在处理网址

上传继续时,我们向用户显示旋钮中 的进度(？)

PHP脚本完成该过程并返回上载的URL

我在AJAX success回调中更新页面以显示上传的文件

那么,标有(？)的两个流程对我来说还不清楚 - 我不知道如何实现这些......

我试过了什么

好吧,我不是来这里请你为我做一切,但我遇到了一个死胡同,我不知道如何继续.我到目前为止所做的是从文本区域收集URL,如果有多个URL由换行符(\n)分隔,我只是split用来获取一个粘贴文本数组,然后在循环中使用另一个函数来验证如果他们是URL.如果在文本区域值内没有检测到换行符,那么我只需检查提供的一行.在每种情况下,我将整个文本区域发送到PHP脚本,因为我不知道如何摆脱jQuery中的无效URL.我已经创建了一个debug()在PHP中调用的函数,它将任何内容存储到debug.log文件中,当我将某些东西粘贴到文本区域时,这就是我得到的(一次尝试):

https://www.google.com/https://www.google.com/

我https://www.google.com/在文本区域粘贴一次,但它在PHP端被记录两次,我无法确定原因.

这就是我的jQuery的样子:

// Remote upload
    var char_start  = 10;
    var index       = 0;
    var urls        = $('.remote-area');
    var val_ary     = [];

    urls.keyup(function(){      
        if (urls.val().length >= char_start)
        {           
            var has_lbrs = /\r|\n/i.test(urls.val());
            val_ary = urls.val().split('\n');

            if (has_lbrs)
            {
                for (var i = 0; i < val_ary.length; i++)
                {
                    if (!validate_url(val_ary[i]))
                    {
                        val_ary.splice(i, 1);
                        continue;   
                    }       
                }

                $.ajax({
                    type: 'POST',
                    url: 'upload.php',
                    data: {
                        upload_type: 'remote', // Used to determine the upload type in PHP
                        urls: val_ary, // Sending the whole array here
                    },
                });
            }
            else
            {
                if (!validate_url(urls.val()))
                {
                    // Display an error here
                    return; 
                }

                $.ajax({
                    type: 'POST',
                    url: 'upload.php',
                    data: {
                        upload_type: 'remote', // Used to determine the upload type in PHP
                        urls: urls.val(), // Sending what's in the text area
                    },
                });
            }
        }
    });

问题

所以最后的问题是:

如何正确地将我的信息发送到PHP脚本,只有有效的URL,并在我的PHP脚本中使用它们"可处理".

如何指示上传的进度？

如果我在问题中某处不清楚,请告诉我,我会尝试重新解释.

谢谢.

更新

2013年9月12日

我想我已经设法解决了双重发送问题,我的AJAX会向PHP脚本发送两次相同的信息.我所做的是延迟匿名函数中的代码,该函数在用户停止键入2秒后将文本区域内容发送到PHP脚本.一旦用户再次停止输入,计时器将重置并发出新的AJAX请求.所以,我假设这个问题已经解决了.如果发生任何奇怪的事情我会回来的.

现在我仍然留有进度指标部分.我很感激你对那一个的看法.

我的新代码: http ://pastebin.com/SaFSLeE9