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