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

Dug*_*ugi 9 html javascript php ajax jquery

我目前正在创建一个图像托管脚本,到目前为止一直很好.我使用了几个插件来创建本地上传过程,使用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

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

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

  1. 用户将一些URL粘贴到文本区域
  2. 有一个客户端检查来验证粘贴的URL
  3. 验证的URL发送到upload.php on keyup (?)
  4. 正在处理网址
  5. 上传继续时,我们向用户显示旋钮中 的进度(?)
  6. PHP脚本完成该过程并返回上载的URL
  7. 我在AJAX success回调中更新页面以显示上传的文件

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


我试过了什么

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

https://www.google.com/https://www.google.com/
Run Code Online (Sandbox Code Playgroud)

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
                    },
                });
            }
        }
    });
Run Code Online (Sandbox Code Playgroud)

问题

所以最后的问题是:

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

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

谢谢.


更新

2013年9月12日

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

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

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

Nal*_*ial 1

在来回沟通进展方面,您所寻求的是“推动”。这是指服务器向客户端发送数据的技术,而不是相反,这是标准的 HTTP 处理方式。

正如解释性维基百科文章中所述,您有很多可用的选项,尽管与该主题更相关的可能是Comet。发生的情况是,您$.ajax像现在一样触发并调用,但设置了很长的超时。这实质上为服务器提供了一个“通道”,可以在数据可用时将数据发送回页面。

因此,您需要的是.php服务器上能够处理长轮询,并在上传进度发生变化时将数据发送回页面(可能以数组形式进行多次上传)。本文应该帮助您开始使用一些 jQuery 代码。请记住,此请求不会发送至upload.php. 该请求发送到另一个脚本,该脚本仅处理上传百分比,并且仅在数据可用时返回数据,它不会像所有其他脚本一样立即返回 - Ajax 会很乐意等待数据。

另外,不要像这样用has_lbrs. 一行或多行不是不同的情况,一行只是多行的边缘情况。您不必要地重复了代码。else在一般情况下,该案例会做什么?此外,该else案例中的“错误处理”具有误导性。您所做的唯一错误报告是如果只有一行并且它是错误的。如果你有两条线并且它们都错了怎么办?您的代码将很乐意将一个空数组发送到upload.php.

这就是为什么我认为你不应该这样分离你的代码,因为那样你就会分割逻辑,甚至不会注意到它。