Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

rafa440

Formulario html com barra de progresso

Por , em Javascript

Recommended Posts

rafa440    0

rafa440
Postado

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">
<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>
body {
	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;
}
dd 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;
}
dd em{
	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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

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

 

Então cara, isso é um pouco mais trabalhoso do que parece a primeira vista.. dá uma olhada nesse projeto:

 

http://demo.swfupload.org/v250beta3/resizedemo/index.php

Compartilhar este post

Link para o post
Compartilhar em outros sites

rafa440    0

rafa440
Postado

Então rapaz

seria mais ou menos assim, desse jeito aki

http://demo.swfupload.org/v250beta3/multiinstancedemo/index.php

 

será que eu consigo adaptar esse formulario para, enquanto ele vai carregando a barra,vai fazendo o upload das imagens mesmo

é que, tipo assim, o formulario puxa a pagina uploads.php que envia para o ftp neh

será que isso é possivel?

tipo, enquanto a barrinha vai carregando, esta realmene enviando, tipo, a barrinha enxeu, envia...

Ps: não tem problema em ser esse formulario mesmo do SWFupload, desde que de para fazer isso...

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Sim, esse site foi feito para isso.

http://swfupload.org/

 

Pegue o código fonte do projeto, veja os arquivos.. instale.. e use !

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

teria que baixar esse primeiro certo?

sim

mas, eu num faço ideia de como fazer isso de juntar tudo isso com o meu formulario sabe?

 

Ai complica cara.. vai tentando.

 

Não tem como eu ou qualquer outra pessoa do fórum fazer para você.

Pergunte, mas não peça pronto.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito