Como esconder e mostrar campos de arquivo no html?
05/01/2018
0
Pessoal estou com o seguinte código
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.
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
Curtir tópico
+ 0
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:
Espero ter ajudado,
Abs.
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
Responder
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
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
Clique aqui para fazer login e interagir na Comunidade :)
