Fazer upload de vários arquivos com um HTML input type=”file” e sem uso de JS e Flash

Muitos não sabem, mas é possível apenas com o HTML puro criar um input do tipo para upload de arquivo que consiga enviar vários arquivos por vez.

Até pouco tempo atrás, a única possibilidade de fazer upload de vários arquivos sem usar vários inputs era fazendo uso de JavaScript e ou com o Flash.

Idependente da complexidade ou facilidade de cada um destes métodos, iremos apresentar um modo puramente HTML e muito simples de ser efetuado. Utilizaremos o atributo multiple

O atributo múltiplo é suportado pelo Internet Explorer 10, Firefox, Opera, Chrome, and Safari. Importante reforçar que o atributo multiple do elemento ‘input’ não é suportado pelo Internet Explorer 9 and versões anteriores.

Sua definição de uso é muito simples. É um atributo booleano que quando presente, define que o usuário poderá enviar mais de um arquivo por vezes num mesmo element input do tipo file.

No lado do servidor, receber os dados permanece quase a mesma coisa. A única diferençaé que será recebido um array de arquivos e não apenas um simples arquivo diretamente.

Segue abaixo um exemplo do lado servidor utilizando PHP para efetuar o tratamento.
Inicialmente a implementando do input no HTML

<!-- Input file, com o atributo multiple para indentificar que o usuário vai poder adicionar mais de um arquivo por vez -->
<input name="arquivos[]" type=file multiple />

Atenção ao nome do input. Se não for adicionado [] ao nome, no lado do servidor, somente um arquivo será recebido.

No PHP os arquivos serão recebidos como um array. Utilizaremos um foreach para tratar cada arquivo recebido de forma individual, como no exemplo abaixo:


#Indice de identificacao da ordem de tratamento do arquivos no servidor
$i = 0;

#Analisa cada arquivo
foreach ($_FILES["arquivos"]["error"] as $key => $error) {
  
    # Definir o diretório onde salvar os arquivos.
    $destino = "diretorio_destino/" . $_FILES["arquivos"]["name"][$i];
  
    #Move o arquivo para o diretório de destino
    move_uploaded_file( $_FILES["arquivos"]["tmp_name"][$i], $destino );

    #Próximo arquivo a ser analisado
    $i++;
}

Gostou? Tire um minutinho e dê sua contribuição para Drall Dev Community no Patreon!

Artigos relacionados: