如何實現jQuery的PHP進度條

我有一個多步驟的形式，其中Step3的形式提交給Step4.php。 Step4是一個結果頁面，需要一些時間來加載，所以我想嘗試實現一個進度條或加載欄或當用戶在Step4.php實際加載之前單擊step3提交按鈕時。我想我可以用jQuery來做到這一點？但是，我不知道如何。有沒有可能做到這一點，而不必使用jQuery將數據發佈到step4.php？如何實現jQuery的PHP進度條

來源

2010-03-29 KittyYoung

這對於Ajax請求來說很難做進度條。您無法通過某種方式訪問請求，從而爲用戶提供進度欄的準確信息。你最好給你的用戶一個微調，告訴他們腳本正在加載內容。

來源

2010-03-29 18:47:13 PetersenDidIt

好的。我會很好...但同樣的問題...我可以做到這一點，而不必使用jQuery來提交表單？有一個微調的插件嗎？我現在正在使用谷歌搜索，但我似乎只是在尋找有關進度條和上傳的內容... – KittyYoung 2010-03-29 18:53:07

@petersendidit：或者你可以做一個安慰劑進度條，它可以估計當前完成的百分比。 @KittyYoung：Spinners只是.gif圖像！ – agscala 2010-03-29 18:56:55

@KittyYoung如果你正在上傳一個文件，那麼進度條更多的是一個選項。如果您正在等待服務器的響應，那就很難了。像agscala一邊一個微調只是一個動畫gif圖像。 – PetersenDidIt 2010-03-29 19:07:29

正如peter所說，從ajax這樣做很困難。通常人們做的是使用一個微型Flash小程序，它提供文件上傳和進度條。我知道Gmail和Wordpress都可以做到這一點，其他人也是如此。有許多預先製作的，你只需要下降，並使用：

來源

2010-03-29 18:53:06 davr

如果這是一個上傳進度條：

第一部分是在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調用。這是一段時間，因爲我已經做了AJAX與PHP，但這樣的事情應該做的：

<?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);

編輯：哎呀，有沒有在原來的職位，說這是一個上傳進度條

來源

2010-03-29 18:59:51 Powerlord

我解決這在一個MySQL加載程序中通過輸出一個帶有進度條的簡單頁面，用flush（）刷新輸出。然後我輸出一個簡單的javascript代碼段：

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

我也在輸出這個JS片段後調用flush。每次要更新進度條時，都必須不斷輸出這些片段。

來源

2010-03-29 19:07:46

一個簡單的PHP上傳進度條：

上傳。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; 
}

View Demo

Ť hank， Chintu

來源

2012-04-25 08:15:00 Chintan

如何實現jQuery的PHP進度條

回答

相關問題