jQuery的进度 - 加载一次全部进度、加载、全部、jQuery

由网友(像条鱼守护你身边)分享简介:我想有一个jQuery进度条的更新基于服务器端请求的状态。我在此基础code掉的本教程,但它采用的是文件上传作为其基地(同this题)。我不能让它工作得没有文件上传相同。的问题是,进度条仅更新process.php完成后。而不是异步请求上取得的最新进展,它等待要完成的全过程。我只看到数据:数据警报一旦任何想法?网页:&...

我想有一个jQuery进度条的更新基于服务器端请求的状态。我在此基础code掉的本教程,但它采用的是文件上传作为其基地(同this题)。我不能让它工作得没有文件上传相同。的问题是,进度条仅更新process.php完成后。而不是异步请求上取得的最新进展,它等待要完成的全过程。我只看到数据:数据警报一旦

任何想法?

网页:

 <形式ID =上传表单行动='process.php'方法=邮报的目标=上传帧>
<输入类型=隐藏ID =UIDNAME =UPLOAD_IDENTIFIER值=< PHP的echo $ UID;?>中>
<输入类型=提交值=提交/>
< /形式GT;

< D​​IV ID =进度>< / DIV>

< IFRAME ID =上传框架NAME =上传框架的风格=显示:无>< / IFRAME>
 

Process.php - 调用时表单提交

 < PHP
在session_start();
$ varArray =阵列(1,2,3,4);
$ _SESSION ['总'] =计数($ varArray);

的foreach($ varArray为$ VAL){
    $ _SESSION ['目前'] = $ VAL;
    睡眠(2);
}
?>
 

的javascript

  $(文件)。就绪(函数(){
    VAR开始= FALSE; //此标志确定是否载已开始
    $(函数(){
        //开始进度跟踪,当表单提交
        $('#上传形式)。递交(函数(){
            $('#进度)进度(); //初始化jQuery UI的插件

            //我们知道上载完成框架加载时
            $('#上传帧)。负载(函数(){
                //这是prevent无限循环
                //如果上传太快
                开始= TRUE;
                //做你想做的时候上传完成
                警报(上传完成!);
            });

            //启动1秒的延迟之后更新进度
            的setTimeout(函数(){
                //我们通过上传标识符我们的函数
                的UpdateProgress($('#UID)VAL());
            },1000);
        });
    });

    功能的UpdateProgress(ID){
        VAR的时间=新的日期()的getTime()。
        //使一个GET请求到服务器
        //把上传的标识符作为参数
        //同时当前时间传递到prevent缓存
        $阿贾克斯({
            网址:getProgress.php,
            键入:GET,
            缓存:假的,
            数据:{UID:ID},
            数据类型:文本,
            成功:功能(数据){
                警报(数据:+数据);
                变种进展= parseInt函数(数据,10);
                如果(进步与LT;!100 ||开始){
                    //确定是否载已开始
                    开始=进度和LT; 100;
                    //如果我们没有这样做或启动,再次更新
                    的UpdateProgress(ID);
                }
                //更新进度条百分比
                //但是,只有当我们开始
                开始和放大器;&安培; $('#进度)进度('值',进度)。
            }
        });
    }
}(jQuery的));
 
30个jQuery CSS3加载动画和进度栏插件

getProgress.php - 调用Ajax请求:

 < PHP
在session_start();
如果(使用isset($ _ REQUEST ['UID'])){
    如果(使用isset($ _ SESSION ['总'])及和放大器;使用isset($ _ SESSION ['目前'])){
        //获取上传进度数据
        $总额= $ _SESSION ['总'];
        $电流= $ _SESSION ['目前'];
        //计算的当前百分比
        $ percent_done = ROUND($电流/ $的总* 100);
        回声$ percent_done;
    }其他{
        回声100; //如果没有数据,假设它的完成
    }
}
?>
 

解决方案

AFAIK,PHP会议实际上是同步的。这意味着,该Process.php脚本从运行,直到Process.php与会话完成阻塞getProgress.php脚本

那么,什么情况是:

Process.php开始,并呼吁在session_start() ,服务器对会话控制在session_start() getProcess.php开始,并呼吁在session_start() 服务器块getProcess.php直到会话使用。 Process.php完成并关闭会话。 在服务器恢复getProcess.php,并赋予它控制了会议。 getProcess.php现在看到这个过程就完成了。

请参阅http://www.php.net/manual/en/function.session-write-close.php.

  

会话数据通常存储在您的脚本之后,无需调用session_write_close()终止,但作为会话数据被锁定为prevent并发写入只有一个脚本,可以在一个会话在任何时候进行操作。 [...]

我没有测试过以下code,因为我没有访问服务器的时刻,但我想事端像它应该工作:

 < PHP
$ varArray =阵列(1,2,3,4);
在session_start();
$ _SESSION ['总'] =计数($ varArray);
session_write_close();

的foreach($ varArray为$ VAL){
    在session_start();
    $ _SESSION ['目前'] = $ VAL;
    session_write_close();
    睡眠(2);
}
?>
 

I'd like to have a jQuery progress bar that updates based on the status of the server side request. I'm basing this code off of this tutorial but it uses a file uploader as its base (same as this question). I can't get it to work quite the same without the file uploader. The problem is that the progress bar only updates after process.php is done. Rather than asynchronously asking for an update on the progress, it waits for the whole process to be done. I only see the data: data alert once.

Any ideas?

Webpage:

<form id="upload-form" action='process.php' method="post" target="upload-frame">
<input type="hidden" id="uid" name="UPLOAD_IDENTIFIER" value="<?php echo $uid; ?>" >
<input type="submit" value="Submit" />
</form>

<div id="progressbar"></div>

<iframe id="upload-frame" name="upload-frame" style="display:none"></iframe>

Process.php - called when form is submitted

<?php
session_start();
$varArray=array(1,2,3,4);
$_SESSION['total']=count($varArray);

foreach($varArray as $val){
    $_SESSION['current']=$val;
    sleep(2);
}
?>

javascript

$(document).ready(function() {
    var started = false;// This flag determines if the upload has started
    $(function() {
        // Start progress tracking when the form is submitted
        $('#upload-form').submit(function() {
            $('#progressbar').progressbar();// Initialize the jQuery UI plugin

            // We know the upload is complete when the frame loads
            $('#upload-frame').load(function() {
                // This is to prevent infinite loop
                // in case the upload is too fast
                started = true;
                // Do whatever you want when upload is complete
                alert('Upload Complete!');
            });

            // Start updating progress after a 1 second delay
            setTimeout(function() {
                // We pass the upload identifier to our function
                updateProgress($('#uid').val());
            }, 1000);
        });
    });

    function updateProgress(id) {
        var time = new Date().getTime();
        // Make a GET request to the server
        // Pass our upload identifier as a parameter
        // Also pass current time to prevent caching
        $.ajax({
            url: 'getProgress.php',
            type: "GET",
            cache: false,
            data: {'uid':id}, 
            dataType: 'text',
            success: function(data){
                alert("data: " + data);
                var progress = parseInt(data, 10);
                if (progress < 100 || !started) {
                    // Determine if upload has started
                    started = progress < 100;
                    // If we aren't done or started, update again
                    updateProgress(id);
                }
                // Update the progress bar percentage
                // But only if we have started
                started && $('#progressbar').progressbar('value', progress);
            }
        });
    }
}(jQuery));

getProgress.php - called by the ajax request:

<?php
session_start();
if (isset($_REQUEST['uid'])) {
    if (isset($_SESSION['total']) && isset($_SESSION['current'])) {
        // Fetch the upload progress data
        $total = $_SESSION['total'];
        $current = $_SESSION['current'];
        // Calculate the current percentage
        $percent_done = round($current/$total*100);
        echo $percent_done;
    }else{
        echo 100;// If there is no data, assume it's done
    }
}
?>

解决方案

AFAIK, PHP sessions are actually synchronous. That means that the Process.php script is blocking the getProgress.php script from running until Process.php is done with the session.

So what happens is:

Process.php starts and calls session_start () The server gives session control to session_start () getProcess.php starts and calls session_start () The server blocks getProcess.php until the session is unused. Process.php completes and closes the session. The server resumes getProcess.php and gives it control over the session. getProcess.php now sees that the process is complete.

See http://www.php.net/manual/en/function.session-write-close.php.

Session data is usually stored after your script terminated without the need to call session_write_close(), but as session data is locked to prevent concurrent writes only one script may operate on a session at any time. [...]

I haven't tested the following code since I don't have access to a server at the moment but I imagine somethin like it should work:

<?php
$varArray=array(1,2,3,4);
session_start();
$_SESSION['total']=count($varArray);
session_write_close ();

foreach($varArray as $val){
    session_start();
    $_SESSION['current']=$val;
    session_write_close ();
    sleep(2);
}
?>

阅读全文

相关推荐

最新文章