você está aqui: Home  → Arquivo de Mensagens Curso Gratuito sobre Expressões Regulares, com o Prof.  Julio Neves

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



Veja a relação completa dos artigos de Rafael Kellermann Streit