Question

我写了一个用于站点备份的PHP代码，我正在压缩整个站点并允许用户在他/她的机器上下载它。压缩和下载工作正常，但由于它是一个站点备份，它需要一些时间来压缩和下载，我不希望用户在压缩/下载过程中导航到任何其他页面。有什么办法，我可以在zip /下载进行时显示进度条吗？我在谷歌搜索，但似乎你可以在上传时显示进度条，但不能在下载时显示。

我在zip实际发生之前创建了一个临时文件，并检查文件是否存在。我的逻辑是如果文件存在然后在JS中显示模式对话框＆＃34;请等待..＆＃34;消息但由于下载使用了标题，我在下载之前基本上无法回复任何内容。

有什么建议吗？

Answer 1

您可以使用gif动画使用假冒进度条......

<script type="text/javascript">
  function SubmitForm() {
    StartProgress();
    var backup = document.getElementById("backup");
    backup.submit();
  }
  function StartProgress() {
    ProgressImage = document.getElementById('progress_image');
    document.getElementById("progress").style.display = "block";
    setTimeout("ProgressImage.src = ProgressImage.src", 100);
    return true;
  }
  </script>

  <form id="backup" action="backup.php" method="post">
    <input class="backup" type="submit" name="backup" onclick="SubmitForm()" value="BackUp">
  </form>
  <div style="display: none" id="progress"><img id="progress_image" src="css/progress_bar.gif" alt="BackUp in progress..."></div>

在这里你可以看到我的想法正常工作......请点击BackUp按钮进行测试......

＆＃13;

@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed);
.box {
  padding: 20px;
  margin: 0 auto;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  border: #C0C0C0 3px solid;
  border-radius: 5px;
  min-width: 270px;
  height: 150px;
  font-family: 'Roboto Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 17px;
  font-style: normal;
  line-height: normal;
  font-weight: normal;
  font-variant: normal;
  background-color: #006699;
}
.backup {
  padding: 10px;
  margin: 0 auto;
  font-family: 'Roboto Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 17px;
  font-style: normal;
  line-height: normal;
  font-weight: normal;
  font-variant: normal;
  background-color: darkviolet;
  color: black;
  border-radius: 5px;
  border: #C0C0C0 3px solid;
  box-shadow: inset -5px 5px 5px rgba(255, 255, 255, 0.15), inset 5px -5px 5px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}
#progress {
  padding: 20px;
}
.cleardiv {
  clear: both;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BackUp Demo Progress Bar</title>
<script type="text/javascript">
  function SubmitForm() {
    StartProgress();
    var backup = document.getElementById("backup");
    backup.submit();
  }
  function StartProgress() {
    ProgressImage = document.getElementById('progress_image');
    document.getElementById("progress").style.display = "block";
    setTimeout("ProgressImage.src = ProgressImage.src", 100);
    return true;
  }
</script>
</head>
<body>
<div class="box">
<form id="backup" action="backup.php" method="post">
<input class="backup" type="submit" name="backup" onclick="SubmitForm()" value="BackUp">
</form>
<div style="display: none" id="progress">
<img id="progress_image" src="http://www.1sttry.de/files/specials/progressbars/ProgressBar23466666.gif" alt="BackUp in progress...">
</div>
<div class="cleardiv"></div>
</div>
</body>
</html>

＆＃13;

然后搜索gif动画以显示进度条...

Google + ajax + loader + gif

我希望这会有所帮助：）

下载PHP进度条

1 个答案: