Barra de progresso da execução de script PHP
Olá pessoal.
Estou usando o ajaxForm para enviar imagens sem dar refresh na página, e nele o uploadProgress para criar a barra de progresso. Até ai tudo bem é bem simples. Ocorre que o meu script php processa todo as imagens, criando miniaturas e imagens menores para que posteriormente seja usadas em versão mobile e miniaturas do site. Isso também é bem simples e já está pronto.
Meu sistema então é composto por:
fotos.php -> onde o usuário tem o formulário para escolher as imagens que serão enviadas para o álbum de fotos.
js_galeria.js -> arquivo com os javascript que contém instruções, bem como, essa do envio sem refresh
processa.php -> que é o arquivo que processo as imagens.
Acontece que o usuário envia as imagens, aparece a barra de progresso que mostra o envio, quando chega a 100% para e fica um tempo esperando o processamento do arquivo php, pois a barra é somente para o envio dos arquivos do computador do usuário até o servidor.
tem como eu fazer essa parra mostra o processamento do php?
atualmente eu coloquei uma nova frase abaixo dizendo que terminou e que está processando as imagens, mas eu queria que a barra mostrasse como está o andamento.
barra de progresso:
<div class="janelaModal" id="JM-Carregando">
<div class="conteudoModal">
<span id="texto_carregando">CARREGANDO...</span>
<small id="porcentagem_carregando">50%</small>
<br>
<div class="barra-progresso">
<div class="barra-progresso-listra"></div>
</div>
<br>
<span id="texto_processando">PROCESSANDO IMAGENS E CRIANDO ALBUM DE FOTOS</span>
</div>
</div>
jquery:
$(function () {
$('#AddxFoto').change(function () {
$('#form-xFoto').ajaxSubmit({
url: "logic/fotos_album.php",
error: function () {
alert('deu erro no envio das imagens')
},
resetForm: true,
uploadProgress: function (evento, posicao, total, completo) {
var porcentagem = completo + "%";
$('#JM-Carregando, .fundoModal-Carregando').show();
$('#porcentagem_carregando').text(porcentagem),
$('#JM-Carregando .barra-progresso-listra').css('width', porcentagem);
if (completo == 100) {
$('#texto_processando').show();
}
},
success: function () {
window.location.href = "a página que ainda será criada para envio depois da finalização";
}
});
return false;
}).submit();
})Discussão (0)
Carregando comentários...