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(); })