Você está aqui: Home  → Arquivo Dicas-L

Assine a Lista Dicas-L

Receba diariamente por email as dicas
de informática publicadas neste site
Para se descadastrar, clique aqui.

HTML5 - Upload de vários arquivos com apenas um INPUT

Colaboração: Rafael Kellermann Streit

Data de Publicação: 13 de maio de 2010

Antes de existir o HTML5, as únicas possibilidades de fazer upload de vários arquivos sem usar vários inputs era fazendo gambiarras com o Flash. Com o tempo vieram várias (ótimas) soluções, desenvolvidas em JavaScript. Mas, nada tão fácil de se implementar como colocar uma propriedade "multiplo" no campo input.

Hoje já é possível criar um sistema de upload, com a possibilidade de selecionar vários arquivos utilizando apenas um input (HTML) e a regra de upload básica, usando PHP. Vamos produzir.

Implementando o input

   <!-- Input file, com o multiple do lado,
        para indentificar que o usuário vai poder adicionar
        mais de um arquivo de uma vez só. -->
   <input name="uploads[]" type=file multiple />

Para controlar o upload no PHP, é bem simples. Os arquivos serão enviados como um array, neste caso, você terá que fazer um foreach e um upload individual para cada arquivo. Observem o código abaixo.

   # Declarar a variável "i", que será nosso controle, para que não haja
   # loop infinito.
   $i = 0;
  
   # Faz um loop conforme o número de arquivos
   foreach ($_FILES["uploads"]["error"] as $key => $error) {
  
     # Definir a pasta que os arquivos serão "upados".
     $pasta = "fotos/_" . $_FILES["uploads"]["name"][$i];
  
     # Aqui, você faz o upload do arquivo, utilizando a classe que você
     # tem aí.
     $ftp->upload($_FILES["uploads"]["tmp_name"][$i], $pasta);
  
     # Agora o arquivo já foi upado, pode fazer alguns scripts adicionais, como por exemplo
     # adicionar o nome dele no banco de dados, ou talvez alertar o nome de cada arquivo.
  
     # Incrementar algum um valor a mais na variável "i" para que não ocorra loop infinito.
     ++$i;
   }
  

Esta implementação tem apenas um detalhe: Não funciona no Internet Explorer.

É isto aí, qualquer dúvida deixem um comentário aqui.

Meu twitter: http://www.twitter.com/rafaelks

PDF	RSS	Imprimir

Referências Adicionais

Referências adicionais sobre os assuntos abordados neste site podem ser encontradas em nossa Bibliografia.

Avalie esta dica

Opinião dos Leitores

Jefferson
12 Abr 2012, 19:20

funcionou muito bem.

Tem uma coisa, quantas vezes eu já perdi muito tempo temtando fazer funfar algo no IE, na parte do site, tudo bem, deve funcionar perfeitamente, mas em partes do sistema, em que o usuário vai usar, você deve dizer que como ele implementando um novo sistema, ele deve se adequar, assim deve usar um navegador, até pode ser o IE, mas tem ser +9.

João
02 Fev 2012, 15:42

Desculpa, mas precisa incrementar algo? ou o código é só isso mesmo?

zacksan
27 Out 2011, 11:29

cara seguinte, MORRA IE, nem adianta tentar funcionar nao, é uma praga para todos os desenvolvedores, bem que a microsoft poderia para de mecher com o IE e já deixar integrado o firefox.... gastariam menos... kk

Anderson
06 Jun 2011, 22:25

É isso ai, funcionou perfeito. O povo que reclamou que não funcionou no IE, duas sugestões:
1: Leia o artigo completo, o autor já havia dito que não funciona no IE;
2: Use o Firefox;

Parabéns pela solução.

Bill
01 Jun 2011, 11:12

O problema que ocorre no IE é o simples fato que ele só utiliza o HTML 5 na versão 9, ou seja sempre irá trazer problemas para desenvolvedores essa praga, falando respeitosamente.

FELIPE
06 Mai 2011, 16:34

CARA D+++++++++++++

Funcionou perfeitamente, era justamente o que eu procurava!!!!! parabens!!!!

Rafael Kellermann Streit
27 Dez 2010, 16:51

@Rafael A. Souza
Este código não funciona no navegador Internet Explorer.

Rafael A. Souza
19 Nov 2010, 15:17

não esta funcionando ,testei no IE e no OPERA sem Nenhum Sucesso ! nesecito deste codigo , por favor se alguem conseguir atualiza-lo me mande uma notificacao
rafa.alves19@uol.com.br

Ivan
04 Out 2010, 18:26

Muito legal msmo, porém parece q não funciona no IE. Alguém mais testou no IE? Ou sabe de alguma forma de funcione em todos os browsers?

Filipe
03 Out 2010, 11:53

Funcionou certinho , mais se eu tento selecionar mais de 12 arquivos, ele da como não selecionado nenhum , posso selecionar no maximo ate 12 de um vez?

uso navegador Google Chorme

Nobody
01 Ago 2010, 10:30

Muito bom, valeu

Kristian
13 Jul 2010, 15:53

Parabéns pelo tutorial, muito útil e simples.
Ja faz algum tempo que tento desenvolver isto e não estava conseguindo.
Procurei em vários foruns mais nãoobtive sucesso..
Muito obrigado.
E mais uma vez parabéns..
Grande abraço

*Nome:
Email:
	Me notifique sobre novos comentários nessa página Oculte meu email
*Texto:
	Para publicar seu comentário, digite o código contido na imagem acima

Powered by Scriptsmill Comments Script