Como deixar um GIF "Rodando"enquanto é executado um Submit

Front-end
#1

Pessoal,

Tenho o seguinte código:

<%@ page import ="br.com.simcard.Upload" %>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<title>SIM Cards</title>
</head>

<style type=text/css>
.canto {
	top: 15px;
} 
</style>


<body> 
	<center>
		<form name="form1" id="form1" action="ServletUpload" method="post" enctype="multipart/form-data">
			<br>
			<input type="hidden" name="hiddenfield1" value="ok">
				Arquivo para Upload : 
			<input type="file" size="50" name="file1" title="Clique para procurar arquivo" >
			<br>
			<br>
			<button title="Clique para carregar arquivo" type="submit" value="Upload" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Upload</button>
				<div id="spoiler" style="display:none">
					<br>Aguarde, 
					<br>Carregando...Isso pode levar alguns minutos.
					<br>
					<img src="./img/carregando.gif" onClick="document.spoiler.submit()" style="cursor:pointer">
					 
					<img style="display:on" src='./img/carregando.gif' width='16' height='11'>
				</div> 
		</form>
		<br>
		<div class="canto"><img src="./img/Seguro.jpg" border="0" width="310" height="434"></div>
	</center>	
</body>
</html>

E tem uma função que habilita um texto/imagem quando for clicado no Botão Upload, que é do tipo submit.
Só que ele aparece a mensagem e a imagem, só que a GIF não roda, fica parada, pois a aplicação está em processamento, e fica la na tela parada esperando a resposta…que será aberta em outra página.

Alguem sabe uma maneira de deixar a GIF rodando??

#2

Cara eu fiz utilizando ajax. Quanto eu clico no botão disparo uma ação no servidor e enquanto isso eu mostro o gif, depois que o servidor responder eu escondo o gif

#3

Cara nunca mexi em ajax, nem imagino como se faz isso… sério mesmo. Mas é algo assim que procuro

#4

Esse seu projeto é java? está utilizando algum framework ou é somente uma página html com javascript? Aconselho se for somente html e javascript que você dê uma olhada no jQuery!

#5

É java, uso o Eclipse

É assim, o cara sobe um arquivo passado do JSP, para a SERVLET, e lá processa todo o sistema, depois, retorna uma mensagem de arquivo enviado, ou não, mas essa mensagem retorna pela própria Servlet, como página :

:
:
if (new Upload().anexos(login, fileItem.getName(), response)) {
				              				
				              out.print("Arquivo enviado com Sucesso!");
#6

Da uma olhada

http://www.devmedia.com.br/trabalhando-com-jsp-ajax-servlet-parte-01/13123
http://www.devmedia.com.br/trabalhando-com-jsp-ajax-servlet-parte02/13338
http://www.knowledgetip.com/index.php/home/software-development/1-java/16-ajaxservlet

Bem o que você precisa, boa sorte

#7

.

#8

Eu queria algo assim:

[code]function wait_animation()
{
var myMsg = “Sending form data to server… Please Wait…”;
window.status = myMsg;
msg(" " + myMsg);
}

function long_wait_animation()
{
var myMsg = "Still sending… You are uploading large files and we have not yet received " +
"all the information. Unfortunately, Internet Explorer sometimes interprets " +
“this delay as a server error. If you receive a ‘Timeout’ or ‘Site not found’ " +
“error please click your ‘Back’ button and try sending less files.”;
window.status = “Still sending …”;
msg(” " + myMsg);
}

// Generic onSubmit handler
function form_on_submit( myForm )
{
form_check_lists( myForm );
if (form_errors.length != 0) {
err( ‘There are some problems with the information you entered:’ +
‘

  • ’ + form_errors.join(’
  • ’) );
    form_enable_submit(myForm); // re-enable submit (so user can retry)
    } else {
    hideLayer(‘err’);
    window.status = “Uploading Data… Please Wait…”;
    form_disable_submit(myForm); // function that prevents double-submissions
    window.setTimeout(“wait_animation()”, 10); // 1/100th
    sec (must happen after submit)
    window.setTimeout(“long_wait_animation()”, 60*1000); // 60 secs
    myForm.submit();
    }
    // reset form errors
    form_errors = new Array();
    return false; // false=don’t submit (because we probably just submitted it).
    }[/code]

    Só não estou conseguindo implantar

#9