Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Ola, eu tenho um formulario em html que serve para fazer upload de imagens
até ai tudo bem
ele é assim:
<form name="fileup" method="post" enctype="multipart/form-data" action="uploads.php">
<input type="file" name="userfiles[]"><br>
<input type="file" name="userfiles[]"><br>
<input type="file" name="userfiles[]"><br>
<input type="file" name="userfiles[]"><br>
<input type="file" name="userfiles[]"><br>
<input type="file" name="userfiles[]"><br>
<input type="file" name="userfiles[]"><br>
<input type="file" name="userfiles[]"><br>
<input type="file" name="userfiles[]"><br>
<input type="file" name="userfiles[]"><br>
<br>
<!-- change below to your max -->
<input type="hidden" name="MAX_FILE_SIZE" value="1000000000">
<input name="submit" type="image" value="submit" src="../../imagem/enviar.png"><br>
</form>
ele funciona perfeitamente, mas, se o arquivo é muito grande, a pessoa tem que ficar esperando sem saber se falta muito para acabar o upload...
eu peguei uma barra de progresso na net e ela funciona, vai até o 100% sozinha
ela é em css
eu queria saber se tem algum jeito de, quando a pessoa clikar em submit, a barrinha começa a contar e o arquivo a ser enviado, isso de verdade, não simplesmente começar e acabar sem ser os dados verdadeiros...
quando a barrinha chega ao fim, vai para uma pagina falando que foi enviado com sucesso...
eu tenho tudo isso, o unico problema é juntar essa barra com o formulario para contar de acordo com o progresso do upload e redirecionar depois
o codigo inteiro esta assim:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pure Css Progress Bar</title>
<meta name="description" content="Css Progress Bar">
</meta>
<style> margin:0;
padding:40px;
background:#fff;
font:70% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}
h1{
font-size:180%;
font-weight:normal;
color:#555;
}
/ DEFINITION LIST PROGRESS BAR /
dl, dt, dd{margin:0;padding:0;}
dd{
width:216px;
height:41px;
background:url(bg_bar.gif) no-repeat 0 0;
position:relative;
} position:absolute;
display:block;
width:200px;
height:25px;
background:url(bar.gif) no-repeat 0 0;
top:8px;
left:8px;
overflow:hidden;
text-indent:-8000px;
} position:absolute;
display:block;
width:200px;
height:25px;
background:url(bg_cover.gif) repeat-x;
top:0;
}
/ SINGLE PROGRESS BAR /
.progressBar{
width:216px;
height:41px;
background:url(bg_bar.gif) no-repeat 0 0;
position:relative;
}
.progressBar span{
position:absolute;
display:block;
width:200px;
height:25px;
background:url(bar.gif) no-repeat 0 0;
top:8px;
left:8px;
overflow:hidden;
text-indent:-8000px;
}
.progressBar em{
position:absolute;
display:block;
width:200px;
height:25px;
background:url(bg_cover.gif) repeat-x 0 0;
top:0;
}
</style>
</head>
<body>
<form name="fileup" method="post" enctype="multipart/form-data" action="uploads.php">
<input type="file" name="userfiles[]"><br>
<input type="file" name="userfiles[]"><br>
<input type="file" name="userfiles[]"><br>
<input type="file" name="userfiles[]"><br>
<input type="file" name="userfiles[]"><br>
<input type="file" name="userfiles[]"><br>
<input type="file" name="userfiles[]"><br>
<input type="file" name="userfiles[]"><br>
<input type="file" name="userfiles[]"><br>
<input type="file" name="userfiles[]"><br>
<br>
<!-- change below to your max -->
<input type="hidden" name="MAX_FILE_SIZE" value="1000000000">
<input name="submit" type="image" value="submit" src="../../imagem/enviar.png"><br>
</form>
<dl>
<dd>
<span><em style="left:200px">100%</em></span>
</dd>
<dt> </dt>
</dl>
</body>
</html>Carregando comentários...