PHP进度条下载 [英] PHP progress bar on download
问题描述
我在zip实际发生之前创建了一个临时文件，并检查该文件是否存在。我的逻辑是如果文件存在然后在JS中显示一个模态对话框，请使用请稍候...消息，但是由于下载使用标题，所以下载前我基本上不能回覆任何内容。
任何建议？
你可以使用一个假进度条使用gif动画...
< script type =text / javascript>
函数SubmitForm（）{
StartProgress（）;
var backup = document.getElementById（backup）;
backup.submit（）;
}
函数StartProgress（）{
ProgressImage = document.getElementById（'progress_image'）;
document.getElementById（progress）。style.display =block;
setTimeout（ProgressImage.src = ProgressImage.src，100）;
返回true;
}
< / script>
< form id =backupaction =backup.phpmethod =post>
< input class =backuptype =submitname =backuponclick =SubmitForm（）value =BackUp>
< / form>
< div style =display：noneid =progress>< img id =progress_imagesrc =css / progress_bar.gifalt =BackUp in progress ...> < / DIV>
这里您可以看到我的想法工作...请点击备份按钮进行测试...
@import url（http://fonts.googleapis.com/css？ = Roboto + Condensed）; box {padding：20px;边距：0自动;显示：inline-block;垂直对齐：中间text-align：center; border：＃C0C0C0 3px solid; border-radius：5px;最小宽度：270px;身高：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;边距：0自动; 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;背景颜色：深紫色颜色：黑色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;}
<！DOCTYPE html>< html>< head>< meta charset =utf-8>< title>备份演示进度栏< / title>< script类型= 文本/ JavaScript的 >函数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）;返回真}< / script>< / head>< body>< div class =box>< form id =backupaction =backup.phpmethod =post>< input class =backuptype =submitname =backuponclick =SubmitForm（）value =BackUp>< / form>< div style =display：noneid =progress> ;< img id =progress_imagesrc =http://www.1sttry.de/files/specials/progressbars/ProgressBar23466666.gifalt =正在进行备份...>< / div>< ; div class =cleardiv>< / div>< / div>< / body>< / html>
>
然后搜索gif动画以显示进度条...
我希望这有助于：）
I wrote a PHP code for site backup and I am compressing the whole site and allowing the user to download it in his/her machine. The compression and download works fine but since it is a site backup, it is taking some time to zip and download and I don't want the user to navigate to any other page while the zip/download is in progress. Is there any way, I can show a progress bar while zip/download is in progress? I searched in google but it seems that you can show progress bar on upload but not while downloading.
I created a temp file before the zip actually takes place and did a check if the file exists. My logic was if the file exist then display a modal dialog in JS with "please wait.." message but since the download makes use of header, I cannot basically echo anything before download.
Any suggestions?
You can use a fake progress bar using a gif animation...
<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>
Here you can see my idea working... please click on BackUp button to test it...
@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;
}
<!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>
Then search a gif animation in order to display a progress bar...
I hope this helps :)
这篇关于PHP进度条下载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
