如何在Ajax和Perl中创建Web进度条？

We use an ajax call for sending the data to the server. The server-side programming is done using Perl to save data into the database.

我们使用ajax调用将数据发送到服务器。服务器端编程使用Perl将数据保存到数据库中。

As we have files which are huge in size we want to display a progress bar which tells the user the percent data posted to the server. How can this be achieved using Ajax and Perl?

由于我们有大尺寸的文件,我们希望显示一个进度条,告诉用户发布到服务器的百分比数据。如何使用Ajax和Perl实现这一目标?

Thanks in Advance.

提前致谢。

3 个解决方案

#1

On a high level, I would likely do this by putting an empty display: block element with a colored background (or maybe an image) on the page with a width of zero, then run periodic AJAX callbacks to the server to get progress updates and increase the element's width accordingly. (I suspect that COMET would be a more efficient way to handle this sort of thing, as the descriptions I've read suggest that its a server-push version of AJAX, so it would eliminate the polling overhead, but I haven't really looked into COMET so I may be misunderstanding it.)

在较高的层面上,我可能会通过在页面上放置一个空白的显示:块元素(带有彩色背景(或者可能是图像)),宽度为零,然后运行定期的AJAX回调到服务器以获得进度更新和相应地增加元素的宽度。 (我怀疑COMET将是一种更有效的方式来处理这类事情,因为我读过的描述表明它是一个服务器推送版本的AJAX,所以它会消除轮询开销,但我还没有真正看着COMET所以我可能会误解它。)

On a low level, the actual code to implement this depends heavily on how you're doing your AJAX. Are you using JQuery, CGI::Ajax, a different module (CPAN or otherwise), or your own hand-rolled AJAX-handling code?

在较低的层面上,实现这一点的实际代码在很大程度上取决于你如何使用AJAX。您使用的是JQuery,CGI :: Ajax,一个不同的模块(CPAN或其他),还是您自己的手动AJAX处理代码?

#2

There are a couple of prewritten scripts to achieve that out there:

有几个预先编写的脚本可以实现这一目标:

#3

Use Comet: push periodical Javascript tags that update the progress bar element in the page. You'll also need to send extra whitespace in order for browsers to update the page (find an equivalent of PHP's flush() in Perl).

使用Comet:推送更新页面中进度条元素的定期Javascript标记。您还需要发送额外的空格,以便浏览器更新页面(在Perl中找到相当于PHP的flush())。

For example, every 10% of uploaded data, push

例如,每10%上传的数据,推送

<script type="text/javascript">progressBar(10)</script>
<script type="text/javascript">progressBar(20)</script>
...
<script type="text/javascript">progressBar(100)</script>

where progressBar(percentage) is a function that updates progressbar width (I'm assuming you have jQuery on the page):

其中progressBar(百分比)是一个更新进度条宽度的函数(我假设你在页面上有jQuery):

function progressBar(percentage) {
    $('#progressbardiv').css('width', percentage + 'px');
}

#1

#2