在页面加载时显示进度条答案

【问题标题】：Show progessbar on page load在页面加载时显示进度条
【发布时间】：2013-02-11 11:16:21
【问题描述】：

我已经创建了在 php 中下载 facebook 相册的脚本。当我点击下载按钮时，脚本会在后台获取该相册中的所有照片并将它们压缩到一个文件夹中。我想在用户单击下载按钮后立即启动“进度条”，因为下载过程可能需要一些时间。

以下是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() 函数启动后，您将移除加载动画并显示所有数据。
至于进度条，您可以使用 twitter 的引导进度条 (twitter.github.com/bootstrap/components.html#progress) 并将其宽度 % 设置为您从 AJAX 调用返回到 PHP 的数字。在您的 PHP 中，您需要计算出您的百分比，并在 AJAX 中反复回显，直到达到 100%。

标签： php javascript jquery progress-bar

【解决方案1】：

这样的？如果我不明白你的问题，请告诉我

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

【讨论】：

它显示了进度条，但没有将其重定向到所需的页面。
我是一个 asp.net 人..我对 PHP 一无所知.. 我只能告诉你方法.. 你应该在下载后调用第二个脚本 (display:none)并重定向已被调用..

【解决方案2】：

您可以使用 ajax 来做到这一点。

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

【讨论】：