Como esconder e mostrar campos de arquivo no html?

05/01/2018

0

HTML PHP HTML5 Lógica de programação

Pessoal estou com o seguinte código


include ('verifica.php');
	echo("<form method='post' action='/sema/index.php/up' enctype='multipart/form-data'>");
	echo("<table>");
	echo("<th>Arquivo - ".$tipo."</th>");
	echo("<tr><td>");
	echo("<input type='hidden' name='tipo' id='tipo' value='".$tipo."'/>");
	echo("<input type='hidden' name='id' id='id' value='".$id."'/>");
	echo("<input type='hidden' name='num' id='num' value='".$registro[num]."'/>");
	echo("</td></tr>");
	echo("<tr><td width='69'>Processo:</td><td><input type='int' name='protocolo' id='prot' value ='".$registro[num]."Of20".$ano."'size=8/></td></tr>");
	echo("<tr><td>CPF:</td><td><input type='int' name='cpf' id='cpf'/></td></tr>");
	echo("<tr><td><input type='date' name='data' id='data'/></td></tr>");
	

	echo("<tr><td><input type='text' name='A1' id='A1'/><input type='file' name='arquivo'/></td></tr>");
		//como esconder isso na pagina e mostrar quando eu apertar um botão????
	echo("<tr><td><input type='text' name='A2' id='A2'/><input type='file' name='arquivo2'/></td></tr>");
	echo("<tr><td><input type='text' name='A3' id='A3'/><input type='file' name='arquivo3'/></td></tr>");
	echo("<tr><td><input type='text' name='A4' id='A4'/><input type='file' name='arquivo4'/></td></tr>");
	echo("<tr><td><input type='text' name='A5' id='A5'/><input type='file' name='arquivo5'/></td></tr>");
	echo("<tr><td><input type='text' name='A6' id='A6'/><input type='file' name='arquivo6'/></td></tr>");
	echo("<tr><td><input type='text' name='A7' id='A7'/><input type='file' name='arquivo7'/></td></tr>");
	echo("<tr><td><input type='text' name='A8' id='A8'/><input type='file' name='arquivo8'/></td></tr>");
	echo("<tr><td><input type='text' name='A9' id='A9'/><input type='file' name='arquivo9'/></td></tr>");
	echo("<tr><td><input type='text' name='A10' id='A10'/><input type='file' name='arquivo10'/></td></tr>");
	echo("<tr><td><input type='text' name='A11' id='A11'/><input type='file' name='arquivo11'/></td></tr>");
	echo("<tr><td><input type='text' name='A12' id='A12'/><input type='file' name='arquivo12'/></td></tr>");
	echo("<tr><td><input type='text' name='A13' id='A13'/><input type='file' name='arquivo13'/></td></tr>");
	echo("<tr><td><input type='text' name='A14' id='A14'/><input type='file' name='arquivo14'/></td></tr>");
	echo("<tr><td><input type='text' name='A15' id='A15'/><input type='file' name='arquivo15'/></td></tr>");
	echo("<tr><td><input type='text' name='A16' id='A16'/><input type='file' name='arquivo16'/></td></tr>");
	echo("<tr><td><input type='text' name='A17' id='A17'/><input type='file' name='arquivo17'/></td></tr>");
	echo("<tr><td><input type='text' name='A18' id='A18'/><input type='file' name='arquivo18'/></td></tr>");
	echo("<tr><td><input type='text' name='A19' id='A19'/><input type='file' name='arquivo19'/></td></tr>");
	echo("<tr><td><input type='text' name='A20' id='A20'/><input type='file' name='arquivo20'/></td></tr>");
	
	echo("<tr><td><input type='submit' value='Enviar' /></td></tr>");
	echo("</table>");
	echo("</form>");


mas eu não quero mostrar esses 20 campos de inserir arquivos ocupando espaço na pagina, queria deixar eles escondidos e ir adicionando só quando fosse necessário.
exemplo: alguém vai adicionar um arquivo, ai ele adiciona lá no primeiro que fica visível, mas supondo que ele precise colocar 4 anexos, ai ele iria clicar 4 vezes no botão "mais arquivo" e então iria aparecer mais 4 campos para por arquivo.

teria alguma forma de fazer isso?

passei a manhã toda olhando isso e tentando vários exemplos.
Rafael Miranda

Rafael Miranda

Responder

Post mais votado

05/01/2018

Olá Rafael,

Quando for construir elementos html na página, uma dica é você inserir diretamente no corpo, para evitar o uso excessivo do echo e também porque não é uma boa prática de programação o jeito como está.

Percebi que você colocou estaticamente 20 campos de arquivo ali, porém para funcionar certinho ao meu ver, é preciso utilizar algumas coisas dinâmicas que o js oferece ao nosso favor.

Eu sugiro para você a utilização de um componente jQuery chamado jQuery File Uploader, já usei muito em meus projetos, é bem fácil de usar e contém uma boa documentação, o que é super importante.

https://blueimp.github.io/jQuery-File-Upload/

É uma boa alternativa para o que você está fazendo, é um mecanismo pronto que faz o serviço pesado da interação com o usuário.

Outra dica, caso você não queira este componente pronto e queira fazer o seu, sugiro a utilização do jQuery para lhe auxiliar na criação da coisa dinâmica do usuário inserir e remover um campo de upload através das instruções:

.append() - http://api.jquery.com/append/ - Adiciona um novo elemento html na página
.remove() - http://api.jquery.com/remove/ - Remove o elemento da página

Outra coisa super importante, o input="file" deve ter o nome seguido da instrução de array[], desta forma:

<input type="file" name="arquivo[]">

Assim, quando você for processar os arquivos enviados, todos estarão no back-end no array arquivo, basta então fazer um loop para salva-los.

Abaixo fiz um pequeno exemplo de como você pode seguir, repare que deixei no post do form a mesma página, assim você pode ver na prática como os dados estão sendo enviados:


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Teste de upload</title>

<style>
    form input{display: block; margin-bottom: 10px;}
    form button{display: inline; margin: 0px 10px 10px 0px;}
</style>

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
</head>

<body>
<?php
if($_FILES)
{
?>
<h1>Dados do formulário</h1>
<?php print_r($_FILES['arquivo']); ?>
<?php
}
?>

<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" name="form1" enctype="multipart/form-data">
        <button id="add">Add</button>
        <button id="remove">Remove</button>
        <input type="submit" value="Enviar dados">
</form>

<script>
 $(document).ready(function(){

    $("#add").click(function(e){
        e.preventDefault();
        $("form").append('<input type="file" name="arquivo[]" value="Arquivo 2">');
    });

    $("#remove").click(function(e){
        e.preventDefault();
        $("form input[type='file']:last").remove();
    });

 })
</script>

</body>
</html>


Espero ter ajudado,

Abs.

William Finco

William Finco
Responder
Gostei + 2

Mais Posts

08/01/2018

Rafael Miranda

cara isso ai ficou lindo, deu super certo com o que eu queria

mas me apareceu um problema '-' executei seu teste e foi lindo, ai coloquei um código similar esse ai, modifiquei algumas coisas para ficar melhor para mim, só que no site (uso o wordpress) quando clica em ADD ele cria dois campos, mas o segundo campo é uma duplicata '-' não sei o que fazer kkkkk
até peguei seu codigo ai e joguei ele igualzinho '-' mesmo assim criou a duplicata
Responder
Gostei + 0

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar