在页面加载时显示进度条

时间:2013-02-11 11:16:22

标签: php javascript jquery progress-bar

我已经创建了在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的代码,我将图像下载到downloads文件夹中,创建所有图像的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;
    }
}
?>

我想在用户点击下载按钮后立即启动“进度条”,因为下载过程可能需要一些时间。

我该怎么做?感谢

2 个答案:

答案 0 :(得分: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');

答案 1 :(得分:0)

您可以使用ajax执行此操作。

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