个人中心
gpt4 book ai didi

javascript - jQuery 和 perl : progress bar based on state of "pipeline file", 动态 ajax

转载 作者：行者123 更新时间：2023-11-29 19:30:01 25 4
gpt4 key购买 nike

我想构建一个小型管道，允许用户选择一个文件，然后使用该文件作为输入运行多个脚本。由于其中一些脚本运行了几分钟(确切时间取决于输入文件的大小)，我想显示一个进度条，该进度条基于已完成此管道的脚本数量。

问题是我不知道如何根据管道的状态更新这个进度条，希望能得到一些帮助。我先展示我使用的文件，然后更详细地解释问题。

我的 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>

每次更改其值时，是否有任何简单的方法将 $progressPerc 从 main.pl 传递给函数 progress()？如果只有一个调用，这可以使用 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 的 sleep 函数表示。

文件如下。

欢迎任何意见和改进!

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>

管道.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;

关于javascript - jQuery 和 perl : progress bar based on state of "pipeline file", 动态 ajax，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28484641/

25 4 0
文章推荐： mysql - 如何将 Excel 或 CSV 文件中的多个空格转换为段落？
文章推荐： javascript - Canvas 中的动画点，奇怪的线条行为，点的速度 > 1 按帧
文章推荐： javascript - 依赖对象类型检查 Javascript 似乎是多余的
文章推荐： c# - 将上下文传递给静态方法会导致 Android 中的内存泄漏吗？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com