在頁面加載時顯示progessbar

我創建了在php中下載facebook相冊的腳本。當我點擊下載按鈕時，腳本將獲取該場景後面該專輯中的所有照片，並將其壓縮到一個文件夾中。我想在用戶點擊下載按鈕時立即啓動「進度條」，因爲下載過程可能需要一段時間。在頁面加載時顯示progessbar

以下是index.php

if ($album['count'] != "0 photos") 
{ 
    echo "<a href=\"download.php?id={$album['id']}\" title='Download this Album' class='downloadbtn'><img src=\"common/images/download_button (1).png\"></a>"; 
}

在這裏，我路過相冊ID的download.php

和下面是download.php我在哪裏下載圖片到下載文件夾中的代碼，創建所有的zip文件該圖像和下載該zip文件。

<?php 
require 'facebook/facebook.php'; 

$facebook = new Facebook(array(
      'appId' => 'xxxxxxxxxxxxx', 
      'secret' => 'xxxxxxxxxxxxxxxxxxxxx', 
      'cookie' => true, 
     )); 

//GETTING THE ID HERE FROM INDEX.PHP FILE 

$albumid = $_GET['id']; 
$photos = $facebook->api("/{$albumid}/photos?limit=50"); 

$file_name = rand(1, 99999) . "_image.zip"; 
$albumArr = array(); 
foreach ($photos['data'] as $photo) { 
    $albumArr[] = $photo['source']; 
} 

create_zip($albumArr, $file_name); 

function create_zip($files, $file_name, $overwrite = false) { 
    $i = 0; 
    $imgFiles = array(); 
    foreach ($files as $imglink) { 
     $img = @file_get_contents($imglink); 
     $destination_path = 'downloads/' . time() . "Image_" . $i . '.jpg'; 
     @file_put_contents($destination_path, $img); 
     $imgFiles[] = $destination_path; 
     $i++; 
    } 

    if (file_exists($file_name) && !$overwrite) { 
     return false; 
    } 
    $valid_files = array(); 
    if (is_array($imgFiles)) { 
     foreach ($imgFiles as $file) { 
      $valid_files[] = $file; 
     } 
    } 

    if (count($valid_files)) { 

     $zip = new ZipArchive(); 
     if ($zip->open($file_name, $overwrite ? ZIPARCHIVE::OVERWRITE : ZIPARCHIVE::CREATE) !== true) { 
      echo "Sorry ZIP creation failed at this time"; 
     } 
     $size1 = 0; 
     foreach ($valid_files as $file) { 
      $size1+= filesize($file); 
      $zip->addFile($file, pathinfo($file, PATHINFO_BASENAME)); 
     } 

     $zip->close(); 

     $allimages = glob('downloads/*.jpg'); 

     foreach ($allimages as $img) { // iterate images 
      if (is_file($img)) { 
       unlink($img); // delete images 
      } 
     } 

     $count = $zip->numFiles; 
     $resultArr = array(); 
     $resultArr['count'] = $count; 
     $resultArr['destination'] = $file_name; 

     $filename = $file_name; 
     $filepath = $_SERVER['HTTP_HOST'] . '/'; 
     $path = $filepath . $filename; 

     if (file_exists($filename)) { 
      // push to download the zip 
      header('Content-type: application/zip'); 
      header('Content-Disposition: attachment; filename="' . $filename . '"'); 
      readfile($filename); 
      unlink($filename); 
     } 
    } else { 
     return false; 
    } 
} 
?>

當用戶點擊下載按鈕作爲下載過程可能需要時間時，我想立即啓動「進度條」。

我該怎麼做？謝謝

來源

2013-02-11 Sky

所以你想讓JQuery執行異步AJAX調用來獲取數據，並且你只需顯示一個加載動畫，而您的PHP正在獲取這些數據並將其傳遞迴AJAX。一旦AJAX success（）函數啓動，您就可以刪除加載動畫並顯示所有數據。 – Jimbo 2013-02-11 11:17:47

至於進度條，您可以使用twitter的引導程序進度條（http://twitter.github.com/bootstrap/components.html#progress），並將其寬度％設置爲您從AJAX調用中返回的數字到PHP。在您的PHP中，您需要計算出您的百分比，並重復出現在AJAX中，直到達到100％。 – Jimbo 2013-02-11 11:20:24

是這樣的嗎？請告訴我，如果我不明白你的問題

HTML：

<img id="loadingImage" src="pathToImage" alt="" style="display:none" /> 
//pathToImage is the path to where your image is located

的jQuery：

$('#YourButtonID').click(function(){ 
    $('#loadingImage').css('display','block'); 
    //call your download page 
    return false; 
});

您下載後和重定向完成後，調用此方法來隱藏進度

$('#loadingImage').css('display','none');

來源

2013-02-11 12:17:11 writeToBhuwan

它顯示進度條，但不會將其重定向到所需的頁面。 – Sky 2013-02-12 06:05:10

我是一個asp.net的傢伙..我對PHP一無所知。我只能告訴你的方式..你應該在你的下載和重定向被調用後的第二個腳本（顯示：無）。 – writeToBhuwan 2013-02-12 06:09:47

好的，謝謝，我會嘗試它 – Sky 2013-02-12 06:11:25

你可以通過使用ajax來做到這一點。

$(document).ready(function() 
{ 
    $("#download_button").click(function() { 
    document.getElementById('progressbar').style.display=''; 
    //call your download page. 
    }); 
});

來源

2013-02-11 12:04:03

在頁面加載時顯示progessbar

回答

相關問題