jQuery和perl:基于状态的进度条;管道文件”;，动态ajax
jQuery and perl: progress bar based on state of "pipeline file", dynamic ajax
我想构建一个小管道，允许用户选择一个文件，然后使用该文件作为输入运行几个脚本。由于其中一些脚本运行了几分钟（确切的时间取决于输入文件的大小），我想显示一个进度条，该进度条基于该管道中已完成的脚本数量。
问题是，我不知道如何根据管道的状态更新这个进度条，如果能提供一些帮助，我将不胜感激。我先展示我使用的文件，然后更详细地解释问题。
我的html表单：
<form action="main.pl" method="post" enctype="multipart/form-data">
<input type="file" name="fileName" />
<input type="submit" value="Analyze" />
</form>
管道脚本main.pl:
#!/usr/bin/perl
use CGI;
use strict;
#use warnings;
my $q = CGI->new;
my $fileName = $q->param('fileName');
my $progressPerc = 0;
my $numJobs = 3; #in actual script much more
my $count = 1;
system('perl', './file1.pl', $fileName);
$progressPerc = $count/$numJobs*100;
#here I want to pass $progressPerc to the progress bar
$count += 1;
system('perl', './file2.pl', $fileName);
$progressPerc = $count/$numJobs*100;
#here I want to pass $progressPerc to the progress bar
$count += 1;
system('perl', './file3.pl', $fileName);
$progressPerc = $count/$numJobs*100;
#here I want to pass $progressPerc to the progress bar
我在上找到了一个良好的工作进度条http://jqueryui.com/progressbar/#label它看起来如下（我发布了整个文件，尽管我只需要.js部分）：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>http://jqueryui.com/progressbar/#label</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<style>
.ui-progressbar {
position: relative;
}
.progress-label {
position: absolute;
left: 50%;
top: 4px;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
}
</style>
<script>
$(function() {
var progressbar = $( "#progressbar" ),
progressLabel = $( ".progress-label" );
progressbar.progressbar({
value: false,
change: function() {
progressLabel.text( progressbar.progressbar( "value" ) + "%" );
},
complete: function() {
progressLabel.text( "Complete!" );
}
});
function progress() {
var val = progressbar.progressbar( "value" ) || 0;
progressbar.progressbar( "value", val + 10 );
if ( val < 99 ) {
setTimeout( progress, 800 );
}
}
setTimeout( progress, 2000 );
});
</script>
</head>
<body>
<div id="progressbar"><div class="progress-label">Loading...</div></div>
</body>
</html>
有没有什么简单的方法可以在函数progress（）每次更改值时将$progressPerc从main.pl传递给它？如果只有一个调用，可以使用ajax来完成，但是，我不知道如何将ajax用于多个调用，即动态调用；所谓"动态"，我的意思是，一旦main.pl中的perl脚本完成，就应该向进度条报告，然后更新进度条。
如果没有简单的方法可以做到这一点：是否可以引入一个If子句，每隔x分钟（使用setTimeout）检查main.pl中这些perl脚本生成的输出文件是否存在，如果存在，则更新进度条，如果不存在，则等待更长的时间？如果是，将如何实施？
我问这个问题已经快一个月了，但没有得到答案。因此，我现在发布我的一个基于ThisSuitIsBlackNot的评论。
虽然没有详细说明，但它可能是一个关于如何连接Perl、HTML、Javascript/Ajax和JSON的最小示例。也许这有助于人们开始谈论这个话题。
如果您想运行此代码，只需将index.html文件复制到html目录（例如/var/www/html），并将perl脚本复制到cgi-bin目录（例如/var/www/cgi-bin）。确保这些perl脚本可执行！在我下面的代码中，cgi目录位于/var/www/cgi-bin/ajax/stackCGI中，请相应地更改。
管道的状态被写入一个文件，然后每隔1秒读取一次，进度条被更新，并显示一条关于当前状态的消息。管道中的单个步骤所花费的持续时间由Perl的睡眠函数表示。
文件如下所示。
欢迎任何意见和改进！
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset='utf-8' />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<style>
.ui-progressbar {
position: relative;
}
.progress-label {
position: absolute;
left: 50%;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
}
</style>
<script>
var progressVal = 0;
function get_progress() //get_progress();
{
$.ajax({
type: 'POST',
url: '/cgi-bin/ajax/stackCGI/readFromFileJson.pl',
success: function( res ) {
$('#progressPerc').append(' ' + res.progressSummary.progress);
$('#progressMessage').html('status of pipeline: ' + res.progressSummary.progressMessage);
$('.progress-label').html(res.progressSummary.progress + '%');
progressVal = parseFloat(res.progressSummary.progress);
$( "#progressbar" ).progressbar({
value: progressVal
});
}
});
if (progressVal < 100){ //pipeline has not finished yet
setTimeout(get_progress, 1000); //call the function each second every second to get a status update
}
else { //pipeline has finished
$('.progress-label').html('100%');
alert("pipeline has finished! your results can be found in path/to/files. an e-mail has been sent to user@provider.com");
}
}
function start_pipeline()
{
$.ajax({
type: 'POST',
url: '/cgi-bin/ajax/stackCGI/pipeline.pl',
data: { 'fileAnalysis': $('#myFile').val() },
success: function(res) {
//add your success function here
},
error: function() {alert("pipeline has not started!");}
});
}
</script>
</head>
<body>
file name: <input type='text' id='myFile'/>
<button onclick='start_pipeline();get_progress();' >Analyze now</button>
<div id="progressbar"><div class="progress-label"></div></div>
<div id="progressMessage"></div>
<div id="progressPerc">status of pipeline in percent (in this example the function get_progress is called every second): </div>
</body>
pipeline.pl:
#!/usr/bin/perl
use strict;
use warnings;
use CGI;
my $q = new CGI;
print $q->header('text/plain'); #needed! otherwise the ajax call in start_pipeline returns the error message
my $fileForAnalysis = $q -> param('fileAnalysis');
#create a file where the progress is reported to
#make sure you have the appropriate permissions to do this
my $filename = '/var/www/cgi-bin/ajax/stackCGI/progressReport.txt'; #change the directory!
my $fh; #file handler
my $number; #progress of pipeline in percent
my $message; #progress of pipeline
$number = 0;
$message = 'pipeline has startet successfully! Your file '.$fileForAnalysis.' is now processed.';
open($fh, '>', $filename) or die "Could not open file '$filename' $!";
print $fh $number."'t".$message;
close $fh;
sleep(3); #first program is running
$number = 10; #progress of pipeline in percent. as we have 4 programs in this pipeline it could also be 25 or whatever
$message = 'first program has finished';
open($fh, '>', $filename) or die "Could not open file '$filename' $!";
print $fh $number."'t".$message;
close $fh;
sleep(5); #second program is running
$number = 20;
$message = 'second program has finished';
open($fh, '>', $filename) or die "Could not open file '$filename' $!";
print $fh $number."'t".$message;
close $fh;
sleep(5); #third program is running
$number = 42;
$message = 'third program has finished';
open($fh, '>', $filename) or die "Could not open file '$filename' $!";
print $fh $number."'t".$message;
close $fh;
sleep(5); #fourth program is running
$number = 100;
$message = 'pipeline has finished';
open($fh, '>', $filename) or die "Could not open file '$filename' $!";
print $fh $number."'t".$message;
close $fh;
readFromFileJson.pl:
#!/usr/bin/perl
use strict;
use warnings;
use JSON;
use CGI;
my $q = new CGI;
#create a file where the progress is reported to
#make sure you have the appropriate permissions to do this
my $filename = '/var/www/cgi-bin/ajax/stackCGI/progressReport.txt'; #change the directory!
open(my $fh, '<:encoding(UTF-8)', $filename) or die "Could not open file '$filename' $!";
print $q->header('application/json;charset=UTF-8'); #output will be returned in JSON format
my @progressReport = split(/'t/,<$fh>); #file is tab separated
my %progressHash;
$progressHash{"progress"} = $progressReport[0];
$progressHash{"progressMessage"} = $progressReport[1];
#convert hash to JSON format
my $op = JSON -> new -> utf8 -> pretty(1);
my $output = $op -> encode({
progressSummary => '%progressHash
});
print $output;
相关文章：
- 如何在php文件中获取$.post-ajax传递的值
- 在使用Polymer'加载所有json文件后执行方法;s的核心ajax
- 通过Ajax将JavaScript函数传递给PHP文件
- Ajax文件加载和<输入>文件加载
- 正在传递JSONP标头's数据参数到另一个文件中的AJAX请求
- 通过ajax到php文件获取单选按钮值
- 在样板文件中实现Ajax
- AJAX不会在文件上传后重定向到网页-POST方法
- 如何在 AJAX JQuQudy中对文件上传进行排队
- 使用ajax下载与存储名称不同名称的文件
- Ajax调用返回当前html页面，而不是请求的文件
- 在更改名称时，使用ajax jsp在下拉菜单中填充多个文件夹的数据
- Rails资产管道-自定义js文件
- Connect-busboy:当管道文件写入蒸汽时，文件为空或不正确，具体取决于类型
- jQuery和perl:基于状态的进度条;管道文件”;，动态ajax
- WebApp 读取文本文件 Ajax、HTTPrequest 或
- Magento:无法运行数据流配置文件:Ajax 错误(未捕获的类型错误:e 不是函数）
- 管道化ajax http请求并仅在Latest请求上执行成功函数
- 如何使用链接检索整个数据文件(ajax?）
- 将管道文件放入具有特定目录的 zip 中
