23 replies to this topic

[SlyX]

eu sei fazer todo o sistema do upload de multiplos arquivos, na verdade, minha duvida é mais quanto a ajax, mas ninguem na parte de ajax responde, gostaria de saber o seguinte, quero fazer um anexador de arquivos, igual ao gmail. "Como assim?" bem simples.. quero q no meu formulario tenha apenas 1 campo: Arquivos [ ] .... e a baixo dele tenha: adicionar outro arquivos

assim, podendo adicionar ate 5 arquivos ou qlqr numero de arquivos em 1 pagina, sem precisar adicionar de 1 em 1.. queria apenas isso
um ajax que quando eu clickasse em "adicionar outro arquivos"
ele escrevesse o campo:

"Arquivo: <input type="file" name="arquivo[]"><br>"

nunca trabalhei com ajax, entao.. ja viu né..

[Paulo André]

Não precisa necessariamente ser Ajax, simplesmente Javascript você faz isso.

Para isso, utilize createElement.

Flws...
Até mais

[SlyX]

Não precisa necessariamente ser Ajax, simplesmente Javascript você faz isso.

Para isso, utilize createElement.

Flws...

tu nao tem algo pronto que sirva como exemplo nao?

[Paulo André]

Aliás, com createElement não. Veja uma função que você pode usá-la em um botão "Adicionar outro anexo":

<script type="text/javascript">
function addFileField()
{
	document.getElementById("fields").innerHTML += "<input type=\"file\" name=\"file[]\" /><br />";
}
</script>

Onde o id fields que você vai jogar os inputs, eu fiz com uma <div>.

Flws...
Até mais

Edição feita por: Paulo André, 08/10/2007, 14:39.

[SlyX]

opa deu certo..

<script type="text/javascript">
<script type="text/javascript">
function addFileField()
{
	document.getElementById("div_file").innerHTML += "<input type=\"file\" name=\"imagem[]\" size=\"35\">";
}
</script>

<li><div id="div_file"><input type="file" name="imagem[]" size="35"></div></li>
	  <li onclick="addFileField()">Adicionar outra Imagem</li>

porem estou com um problema, quando clicko para adicionar a otura imagem, o campo de cima perde o valor atual... queria manter o valor...


tipo ele perde os valores, seu eu escolhe 1 arquivo, e deopis clicko em adicionar outro arquivo...

Edição feita por: SlyX, 08/10/2007, 16:01.

[Paulo André]

Opa... apaga tudo rs...
Faz assim:

function addFileField()
{
	var ff = document.createElement("input");
	ff.type = "file";
	ff.name = "file[]";
	document.frm.appendChild(ff);
}

Que irá adicionar em um form de nome frm seguindo meu exemplo.

Foi mal, depois que pensei melhor.

******* EDITADO *******
Para a quebra de linha você pode adicionar esta linha:

document.frm.appendChild(document.createElement("br"));

Flws...
Até mais

Edição feita por: Paulo André, 08/10/2007, 16:09.

[SlyX]

funcionou, mas nao to conseguindo ajustar ele dentro da li, ele esta aparecendo slto na tela ehhehe

[Paulo André]

Cuma?

Desenha ai pra mim porque não entendi não.. rs... Até mais

[SlyX]

ok.. tirei umas coisas q achei inutil, a questao é:
o input file, esta dentro de um LI... gostaria que os outros que aparecem, aparecessem dentro do LI, entende?

no metodo antigo eu poderia fazer:

document.getElementById("fields").innerHTML += "<li><input type=\"file\" name=\"file[]\" /></li>";

<?
session_start();
require "../include/topo.inc.php";
?>

<script type="text/javascript">
function addFileField()
{
	var ff = document.createElement("input");
	ff.type = "file";
	ff.name = "file[]";
	document.form1.appendChild(ff);
	document.form1.appendChild(document.createElement("br"));
}
</script>

<script src="../include/data.js" type="text/javascript"></script>

<form name="form1" id="form1" enctype="multipart/form-data" action="editar.php?tipo=<?=$acao;?>" method="post">
<div id="en">
	<ul>
	  <li><h2>Imagem:</h2></li>
	  <li><div id="div_file"><input type="file" name="imagem[]" size="35"></div></li>
	  <li><a onclick="addFileField()">Adicionar outra Imagem</a></li>
	</ul>
</div>

<div id="botao">
	<input type="submit" class="buttom" value="Salvar" />
</div>

</form>

<?
  include("../include/rodape.inc.php");
?>

Edição feita por: SlyX, 08/10/2007, 16:46.

[Paulo André]

Crie o <li> da mesma forma, com o createElement:

function addFileField()
{
	var li = document.createElement("li");
	var ff = document.createElement("input");
	ff.type = "file";
	ff.name = "file[]";
	document.frm.appendChild(li);
	li.appendChild(ff);
}

Flws...
Até mais

Edição feita por: Paulo André, 08/10/2007, 16:52.

[bimonti]

Acho que vai dar problema de referência... você teria que dar appendChild no input na LI antes de dar o appendChild no form ...

Além do que, tem que coloca a li dentro da ul, então tem que usar ou getElementById (se ela tiver um id), ou getElementsByTagName('ul') ... ou uma mescla dos 2.

[SlyX]

Acho que vai dar problema de referência... você teria que dar appendChild no input na LI antes de dar o appendChild no form ...

Além do que, tem que coloca a li dentro da ul, então tem que usar ou getElementById (se ela tiver um id), ou getElementsByTagName('ul') ... ou uma mescla dos 2.

ou seja: cheguei a conclusao q nao sei nada de js =/

amiguinhos?

[bimonti]

function addFileField()

{

	var li = document.createElement("li");

	var ff = document.createElement("input");

	ff.type = "file";

	ff.name = "file[]";

	li.appendChild(ff);

	document.getElementById('suaUL').appendChild(li);

}

[SlyX]

<script type="text/javascript">
function addFileField()
{
	var li = document.createElement("li");
	var ff = document.createElement("input");
	ff.type = "file";
	ff.name = "imagem[]";
	ff.size = "35";
	li.appendChild(ff);
	document.getElementById('div_file').appendChild(li);
}
</script>

<ul id="ul_arquivo">
	  <li><h2>Imagem:</h2></li>
	  <div id="div_file">
	  <li><input type="file" name="imagem[]" size="35"></li>
	  </div>
	  <li><a onclick="addFileField()">Adicionar outra Imagem</a></li>
	</ul>

achei muito legal essa parte de "DOM" vou dar uma estudada... para iniciar bem no ajax

tinha ocorrido um erro no iexplorer, acho que devido a interacao com o css(ie6) ..
entao eu alterei

<ul id="div_file">
	   <li>
		<input type="file" name="imagem[]" size="35">
	   </li>
	  </ul>
	  <ul>
		<li><a onclick="addFileField()">Adicionar outra Imagem</a></li>
	  </ul>

[bimonti]

Só uma observação, ou você coloca o atributo href no link ou muda pra um button:

<a href="pagina_qualquer.htm" onclick="function();return false">Texto</a>

<!--ou-->

<button onclick="function();">Texto</button>

Da forma que você colocou gera erros porque não é nem um link (porque não tem href) e nemuma ancora (porque não tem name)... ok?!