当前位置： 文江博客话题详情

如何实现jquery php进度条

发布于 2024-08-27 04:32:06 字数 188 浏览 3 评论 0原文

我有一个多步骤表单，其中 Step3 上的表单提交到 Step4.php。 Step4是一个结果页面，加载需要一些时间，所以我想尝试在Step4.php实际加载之前，当用户单击step3提交按钮时实现一个进度条或加载栏之类的东西。我想我可以用 jquery 做到这一点？但是，我不确定如何。是否可以做到这一点而不必使用jquery将数据发布到step4.php？

原文

I have a multi-step form where the form on Step3 submits to Step4.php. Step4 is a results page, and it takes some time to load, so I wanted to try and implement a progress bar or a loading bar or something when the user clicks the step3 submit button before Step4.php actually loads. I would think I could do this with jquery? But, I'm not sure how. Is it possible to do this without having to use jquery to post the data to step4.php?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（5）

笛声青案梦长安 2024-09-03 04:32:06

为ajax请求做进度条是非常困难的。您实际上无法以通过进度条向用户提供准确信息的方式访问该请求。您最好为用户提供一个旋转器，向他们显示脚本正在加载内容。

It is very hard to do progress bars for ajax requests. You don't really have access to the request in a way to give the user accurate information with a progress bar. You are better off giving your users a spinner showing them that the script is working on loading things.

回复 原文
清眉祭 2024-09-03 04:32:06

正如 Peter 所说，通过 ajax 很难做到这一点。人们通常会使用一个小的 Flash 小程序来提供文件上传和进度条。我知道 Gmail 和 Wordpress 都这样做，还有许多其他的。有许多预制的，您只需放入并使用即可：

As peter says, this is very difficult to do from ajax. Often what people do instead is use a tiny Flash applet which provides the file upload and progress bars. I know both Gmail and Wordpress do this, many others as well. There are many pre-made ones that you just have to drop in and use:

回复 原文
太阳哥哥 2024-09-03 04:32:06

我在 MySQL 加载程序中解决了这个问题，方法是输出一个带有进度条的简单页面，并使用 flash() 刷新输出。然后我输出一个简单的 javascript 片段：

    $('#progressbar').progressbar({value: 0});

输出此 JS 片段后我还调用了flush。每次要更新进度条时，您都必须不断输出这些片段。

I solved this in a MySQL loading program by outputting a simple page with the progress bar, flushing the output with flush(). I then output a simple snippet of javascript:

    $('#progressbar').progressbar({value: 0});

I also call flush after outputting this JS snippet. You have to continually output these snippets each time you want to update the progressbar.

回复 原文
谈下烟灰 2024-09-03 04:32:06

如果这是一个上传进度条：

第一部分是在 PHP 端安装一些可以连接的东西。

APC 扩展包含上传挂钩机制。您可能已经安装了它，因为它是 PHP 的常见操作码缓存（默认情况下将包含在 PHP6 中）。

安装 APC 后，您需要设置 PHP 页面和 PHP 处理程序端。

PHP 页面：

<?php
    $uploadId = uniqid('', true);
?>

<script type="text/javascript">
    function uploadProgress() {
        $.ajax({
            url: 'url/to/handler.php',
            data: ({ progressId: <?php echo $uploadId; ?> }),
            success: displayProgress
        });
    }

    function displayProgress(data) {
        // Do something with data['current'] and data['total'] here
        // Possibly using a JQuery UI Progressbar
        // http://jqueryui.com/demos/progressbar/
    }
</script>

...

<!-- Your other form elements would be on this form, too -->
<form action="step4.php" enctype="multipart/form-data">
<input type="hidden" name="APC_UPLOAD_PROGRESS" value="<?php echo uploadId; ?>" />
<input type="file" name="file" />
<input type="submit" onClick="setInterval(uploadProgress, 1000); return false;" />
</form>

您还需要 PHP 端的脚本来通过 AJAX 调用。自从我用 PHP 完成 AJAX 以来已经有一段时间了，但是应该做这样的事情：

<?php
$returnData = array('current' => 0, 'total' => 0);

if (!empty($_GET['progressId'])) {

    $uploadProgress = apc_fetch('upload_' . $_GET['progressId']);
    if (!empty($uploadProgress)) {
        $returnData['current'] = $uploadProgress['current'];
        $returnData['total'] = $uploadProgress['total'];
    }
}

echo json_encode($returnData);

编辑：哎呀，原始帖子中没有任何内容表明这是一个上传进度条

If this is an upload progress bar:

The first part is installing something on the PHP side that you can hook into.

The APC extension includes an upload hook mechanism. You may already have this installed, as it's a common opcode cache for PHP (and will be included by default in PHP6).

Once APC is installed, you need to set up both the PHP page and PHP handler sides.

PHP page:

<?php
    $uploadId = uniqid('', true);
?>

<script type="text/javascript">
    function uploadProgress() {
        $.ajax({
            url: 'url/to/handler.php',
            data: ({ progressId: <?php echo $uploadId; ?> }),
            success: displayProgress
        });
    }

    function displayProgress(data) {
        // Do something with data['current'] and data['total'] here
        // Possibly using a JQuery UI Progressbar
        // http://jqueryui.com/demos/progressbar/
    }
</script>

...

<!-- Your other form elements would be on this form, too -->
<form action="step4.php" enctype="multipart/form-data">
<input type="hidden" name="APC_UPLOAD_PROGRESS" value="<?php echo uploadId; ?>" />
<input type="file" name="file" />
<input type="submit" onClick="setInterval(uploadProgress, 1000); return false;" />
</form>

You will also need a script on the PHP side to call via AJAX. It's been awhile since I've done AJAX with PHP, but something like this should do:

<?php
$returnData = array('current' => 0, 'total' => 0);

if (!empty($_GET['progressId'])) {

    $uploadProgress = apc_fetch('upload_' . $_GET['progressId']);
    if (!empty($uploadProgress)) {
        $returnData['current'] = $uploadProgress['current'];
        $returnData['total'] = $uploadProgress['total'];
    }
}

echo json_encode($returnData);

Edit: Whoops, there's nothing in the original post that says this is an upload progress bar

回复 原文
若言繁花未落 2024-09-03 04:32:06

一个简单的 PHP 上传进度条：

在 upload.php

<?php  
   //get unique id 
   $up_id = uniqid();  
?> 

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  <html xmlns="http://www.w3.org/1999/xhtml"> 
        <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
        <title>Upload your file</title> 

        <!--Progress Bar and iframe Styling--> 
        <link href="style_progress.css" rel="stylesheet" type="text/css" /> 

        <!--Get jQuery--> 
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js" type="text/javascript"></script> 

        <!--display bar only if file is chosen--> 
        <script> 

        $(document).ready(function() {  


        //show the progress bar only if a file field was clicked 
      var show_bar = 0; 
      $('input[type="file"]').click(function(){ 
          show_bar = 1; 
}); 

  //show iframe on form submit 
$("#form1").submit(function(){ 

    if (show_bar === 1) {  
        $('#upload_frame').show(); 
        function set () { 
            $('#upload_frame').attr('src','upload_frame.php?up_id=<?php echo $up_id; ?>'); 
        } 
        setTimeout(set); 
    } 
      }); 

  }); 

  </script> 

  </head> 

  <body> 
  <h1>Upload your file </h1> 

  <div> 
    <?php if (isset($_GET['success'])) { ?> 
    <span class="notice">Your file has been uploaded.</span> 
    <?php } ?> 
    <form action="" method="post" enctype="multipart/form-data" name="form1" id="form1"> 
      Name<br /> 
      <input name="name" type="text" id="name"/> 
      <br /> 
      <br /> 
      Your email address <br /> 
      <input name="email" type="text" id="email" size="35" /> 
      <br /> 
      <br /> 
Choose a file to upload<br /> 

  <!--APC hidden field--> 
<input type="hidden" name="APC_UPLOAD_PROGRESS" id="progress_key" value="<?php echo $up_id; ?>"/> 
  <!----> 

<input name="file" type="file" id="file" size="30"/> 

  <!--Include the iframe--> 
<br /> 
<iframe id="upload_frame" name="upload_frame" frameborder="0" border="0" src="" scrolling="no" scrollbar="no" > </iframe> 
<br /> 
  <!----> 

      <input name="Submit" type="submit" id="submit" value="Submit" /> 
    </form> 
    </div> 

  </body> 

  </html>

中 upload_frams.php

 <?php 

 $url = basename($_SERVER['SCRIPT_FILENAME']); 

 //Get file upload progress information. 
 if(isset($_GET['progress_key'])) { 
$status = apc_fetch('upload_'.$_GET['progress_key']); 
echo $status['current']/$status['total']*100; 
die; 
 } 
 // 

 ?> 

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js" type="text/javascript"></script> 
 <link href="style_progress.css" rel="stylesheet" type="text/css" /> 

 <script> 
 $(document).ready(function() {  

setInterval(function()  
    { 
$.get("<?php echo $url; ?>?progress_key=<?php echo $_GET['up_id']; ?>&randval="+ Math.random(), {  
    //get request to the current URL (upload_frame.php) which calls the code at the top of the page.  It checks the file's progress based on the file id "progress_key=" and returns the value with the function below:
}, 
    function(data)    //return information back from jQuery's get request 
        { 
            $('#progress_container').fadeIn(100);    //fade in progress bar     
            $('#progress_bar').width(data +"%");    //set width of progress bar based on the $status value (set at the top of this page) 
            $('#progress_completed').html(parseInt(data) +"%");    //display the % completed within the progress bar 
        } 
    )},500);    //Interval is set at 500 milliseconds (the progress bar will refresh every .5 seconds) 

 }); 


 </script> 

 <body style="margin:0px"> 
 <!--Progress bar divs--> 
 <div id="progress_container"> 
<div id="progress_bar"> 
       <div id="progress_completed"></div> 
</div> 
 </div> 
 <!----> 
 </body>

中 style_progress.css

/*iframe*/
#upload_frame {
    border:0px;
    height:40px;
    width:400px;
    display:none;
}

#progress_container {
    width: 300px; 
    height: 30px; 
    border: 1px solid #CCCCCC; 
    background-color:#EBEBEB;
    display: block; 
    margin:5px 0px -15px 0px;
}

#progress_bar {
    position: relative; 
    height: 30px; 
    background-color: #F3631C; 
    width: 0%; 
    z-index:10; 
}

#progress_completed {
    font-size:16px; 
    z-index:40; 
    line-height:30px; 
    padding-left:4px; 
    color:#FFFFFF;
}

查看演示

谢谢，
钦图

A Simple PHP Upload Progress Bar :

in upload.php

<?php  
   //get unique id 
   $up_id = uniqid();  
?> 

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  <html xmlns="http://www.w3.org/1999/xhtml"> 
        <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
        <title>Upload your file</title> 

        <!--Progress Bar and iframe Styling--> 
        <link href="style_progress.css" rel="stylesheet" type="text/css" /> 

        <!--Get jQuery--> 
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js" type="text/javascript"></script> 

        <!--display bar only if file is chosen--> 
        <script> 

        $(document).ready(function() {  


        //show the progress bar only if a file field was clicked 
      var show_bar = 0; 
      $('input[type="file"]').click(function(){ 
          show_bar = 1; 
}); 

  //show iframe on form submit 
$("#form1").submit(function(){ 

    if (show_bar === 1) {  
        $('#upload_frame').show(); 
        function set () { 
            $('#upload_frame').attr('src','upload_frame.php?up_id=<?php echo $up_id; ?>'); 
        } 
        setTimeout(set); 
    } 
      }); 

  }); 

  </script> 

  </head> 

  <body> 
  <h1>Upload your file </h1> 

  <div> 
    <?php if (isset($_GET['success'])) { ?> 
    <span class="notice">Your file has been uploaded.</span> 
    <?php } ?> 
    <form action="" method="post" enctype="multipart/form-data" name="form1" id="form1"> 
      Name<br /> 
      <input name="name" type="text" id="name"/> 
      <br /> 
      <br /> 
      Your email address <br /> 
      <input name="email" type="text" id="email" size="35" /> 
      <br /> 
      <br /> 
Choose a file to upload<br /> 

  <!--APC hidden field--> 
<input type="hidden" name="APC_UPLOAD_PROGRESS" id="progress_key" value="<?php echo $up_id; ?>"/> 
  <!----> 

<input name="file" type="file" id="file" size="30"/> 

  <!--Include the iframe--> 
<br /> 
<iframe id="upload_frame" name="upload_frame" frameborder="0" border="0" src="" scrolling="no" scrollbar="no" > </iframe> 
<br /> 
  <!----> 

      <input name="Submit" type="submit" id="submit" value="Submit" /> 
    </form> 
    </div> 

  </body> 

  </html>

In upload_frams.php

 <?php 

 $url = basename($_SERVER['SCRIPT_FILENAME']); 

 //Get file upload progress information. 
 if(isset($_GET['progress_key'])) { 
$status = apc_fetch('upload_'.$_GET['progress_key']); 
echo $status['current']/$status['total']*100; 
die; 
 } 
 // 

 ?> 

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js" type="text/javascript"></script> 
 <link href="style_progress.css" rel="stylesheet" type="text/css" /> 

 <script> 
 $(document).ready(function() {  

setInterval(function()  
    { 
$.get("<?php echo $url; ?>?progress_key=<?php echo $_GET['up_id']; ?>&randval="+ Math.random(), {  
    //get request to the current URL (upload_frame.php) which calls the code at the top of the page.  It checks the file's progress based on the file id "progress_key=" and returns the value with the function below:
}, 
    function(data)    //return information back from jQuery's get request 
        { 
            $('#progress_container').fadeIn(100);    //fade in progress bar     
            $('#progress_bar').width(data +"%");    //set width of progress bar based on the $status value (set at the top of this page) 
            $('#progress_completed').html(parseInt(data) +"%");    //display the % completed within the progress bar 
        } 
    )},500);    //Interval is set at 500 milliseconds (the progress bar will refresh every .5 seconds) 

 }); 


 </script> 

 <body style="margin:0px"> 
 <!--Progress bar divs--> 
 <div id="progress_container"> 
<div id="progress_bar"> 
       <div id="progress_completed"></div> 
</div> 
 </div> 
 <!----> 
 </body>

In style_progress.css

/*iframe*/
#upload_frame {
    border:0px;
    height:40px;
    width:400px;
    display:none;
}

#progress_container {
    width: 300px; 
    height: 30px; 
    border: 1px solid #CCCCCC; 
    background-color:#EBEBEB;
    display: block; 
    margin:5px 0px -15px 0px;
}

#progress_bar {
    position: relative; 
    height: 30px; 
    background-color: #F3631C; 
    width: 0%; 
    z-index:10; 
}

#progress_completed {
    font-size:16px; 
    z-index:40; 
    line-height:30px; 
    padding-left:4px; 
    color:#FFFFFF;
}

View Demo

Thanks,
Chintu

回复 原文
~没有更多了~

关于作者

独﹏钓一江月

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

qq_FjTq5B

文章 0 评论 0

18273202778

文章 0 评论 0

WordPress小学生

文章 0 评论 0

〃温暖了心ぐ

文章 0 评论 0

迷乱花海

文章 0 评论 0

niuniu

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文