在页面加载时显示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; 
    } 
} 
?>

当用户点击下载按钮作为下载过程可能需要时间时，我想立即启动“进度条”。

我该怎么做？谢谢

所以你想让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');

它显示进度条，但不会将其重定向到所需的页面。 – 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. 
    }); 
});

在页面加载时显示progessbar

相关推荐