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
很容易实现本地上传的进度指示器,因为它是我使用的插件提供的功能,但我不知道如何指示远程上传的进度,这完全是从头开始的.
所以这就是我想象的逻辑流程:
keyup 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)
所以最后的问题是:
如果我在问题中某处不清楚,请告诉我,我会尝试重新解释.
谢谢.
2013年9月12日
我想我已经设法解决了双重发送问题,我的AJAX会向PHP脚本发送两次相同的信息.我所做的是延迟匿名函数中的代码,该函数在用户停止键入2秒后将文本区域内容发送到PHP脚本.一旦用户再次停止输入,计时器将重置并发出新的AJAX请求.所以,我假设这个问题已经解决了.如果发生任何奇怪的事情我会回来的.
现在我仍然留有进度指标部分.我很感激你对那一个的看法.
我的新代码: http ://pastebin.com/SaFSLeE9
在来回沟通进展方面,您所寻求的是“推动”。这是指服务器向客户端发送数据的技术,而不是相反,这是标准的 HTTP 处理方式。
正如解释性维基百科文章中所述,您有很多可用的选项,尽管与该主题更相关的可能是Comet。发生的情况是,您$.ajax像现在一样触发并调用,但设置了很长的超时。这实质上为服务器提供了一个“通道”,可以在数据可用时将数据发送回页面。
因此,您需要的是.php服务器上能够处理长轮询,并在上传进度发生变化时将数据发送回页面(可能以数组形式进行多次上传)。本文应该帮助您开始使用一些 jQuery 代码。请记住,此请求不会发送至upload.php. 该请求发送到另一个脚本,该脚本仅处理上传百分比,并且仅在数据可用时返回数据,它不会像所有其他脚本一样立即返回 - Ajax 会很乐意等待数据。
另外,不要像这样用has_lbrs. 一行或多行不是不同的情况,一行只是多行的边缘情况。您不必要地重复了代码。else在一般情况下,该案例会做什么?此外,该else案例中的“错误处理”具有误导性。您所做的唯一错误报告是如果只有一行并且它是错误的。如果你有两条线并且它们都错了怎么办?您的代码将很乐意将一个空数组发送到upload.php.
这就是为什么我认为你不应该这样分离你的代码,因为那样你就会分割逻辑,甚至不会注意到它。