Индикатор выполнения PHP при загрузке

Question

Индикатор выполнения PHP при загрузке

Я написал PHP-код для резервного копирования сайта и сжимаю весь сайт и позволяю пользователю загрузить его на свой компьютер. Сжатие и загрузка работают нормально, но поскольку это резервная копия сайта, для архивации и загрузки требуется некоторое время, и я не хочу, чтобы пользователь переходил на любую другую страницу, пока выполняется архивирование / загрузка. Есть ли способ, я могу показать индикатор выполнения, пока идет zip / download? Я искал в Google, но кажется, что вы можете показать индикатор при загрузке, но не при загрузке.

Я создал временный файл до того, как на самом деле произошел zip, и проверил, существует ли файл. Моя логика заключалась в том, что если файл существует, то в JS отображается модальное диалоговое окно с сообщением «пожалуйста, подождите …», но поскольку при загрузке используется заголовок, я не могу ничего сделать перед загрузкой.

Какие-либо предложения?

-3

download php progress zip

Решение

По вопросам рекламы [email protected]

Accepted Answer

Вы можете использовать фальшивый индикатор выполнения, используя анимацию 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, чтобы проверить это …

@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>

0

Другие решения

Других решений пока нет …

Источник