você está aqui: Home  → Arquivo de Mensagens

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

Opinião dos Leitores

Marco
12 Jan 2014, 19:37
Ola tudo bem vamos ver se vc pode me ajudar fiz um site www.consorciosfacil.com.br, e na pagina de cadastro pessoa fisica fiz um formulario usando contact form 7 no wordpress, e preciso criar um botão de upload de varios arquivos de uma vez so, segue abaixo o codigo que estou usando


<p>Inserir Copia RG<br />
[file upload limit:5mb]
<p>Inserir Copia CPF<br />
[file upload limit:5mb]
Inserir Copia CPF:
[file upload limit:5mb]
Inserir Copia Endereço Aguá, Luz ou Telefone:
Inserir - Comprovante de renda - 03 últimos Holerites e cópia da carteira de Trabalho, ou declaração de imposto de renda no
caso de autônomo Decore e IR, podendo ser extratos bancários como complemento de comprovação - comprovar 04 x o valor da parcela
[file upload limit:5mb]


[submit]
Cleber David
17 Nov 2013, 13:06
Olá amigo, por favor se for possivel dá uma olhada no código da minha pagina colo abaixo, preciso muito fale-la funcionar com mult upload, desde já agradeço, já tentei e não consegui.

<?php


$acao = strip_tags( $_GET['acao'] );
$id = strip_tags( $_GET['id'] );
$idF = strip_tags( $_GET['idF'] );
?>

<?php echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?".">"; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fotos</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="../css/fonts.css" rel="stylesheet" type="text/css">
</head>

<body class="cinza10" bgcolor="#FFF">
<table width="388" border="0" align="center" cellpadding="0" cellspacing="0">

<tr>
<td width="115" height="13"></td>
<td width="28"></td>
<td width="115"></td>
<td width="15"></td>
<td width="115"></td>
</tr>
<tr>
<td height="13" valign="top" class="Cel1"><strong><a href="imoveis_fotos.php?acao=&id=<? echo $id; ?>">FOTO
PRINCIPAL </a> </strong></td>
<td></td>
<td valign="top" class="Cel1"><strong><a href="imoveis_fotos.php?acao=extra&id=<? echo $id; ?>">
FOTOS EXTRAS</a></strong></td>
<td></td>
<td valign="top" class="Cel1"><a href="album_add.php?id=<? echo $id; ?>"><strong>ADICIONAR
FOTO</strong></a></td>
</tr>
<tr>
<td height="34"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<p align="center">
<?

$acao = strip_tags( $_GET['acao'] );
$id = strip_tags( $_GET['id'] );
$idF = strip_tags( $_GET['idF'] );

include("../config.php");
include("verifica.php");

if($acao ==''){

echo '<form action="album_add.php?acao=add&id='.$id.'" method="post" enctype="multipart/form-data" name="form1">
<p align="center">Imagens<br>
<input type="file" name="foto" multiple>
</p>
<p align="center">Pequena descrição<br>
<input name="desc_" type="text" size="60" maxlength="250">
</p>
<p align="center">
<input type="submit" name="Submit" value="Enviar">
</p>
</form>';

}// FECHA principal
?>
<?
if($acao =='add'){
$erro = $config = array();

// Prepara a variável do arquivo
$arquivo = isset($_FILES["foto"]) ? $_FILES["foto"] : FALSE;

// Tamanho máximo do arquivo (em bytes)
$config["tamanho"] = 1010680;
// Largura máxima (pixels)
$config["largura"] = 1024;
// Altura máxima (pixels)
$config["altura"] = 768;

// Formulário postado... executa as ações
if($arquivo)
{
// Verifica se o mime-type do arquivo é de imagem
if(!eregi("^image\/(pjpeg|jpeg|gif|swf)$", $arquivo["type"])){



$erro[] = "Arquivo em formato inválido! Arquivos devem ser do tipo: jpg, jpeg ou
gif.";

echo "<script language='JavaScript'>
alert('Arquivo em formato inválido! Formato aceito: JPG, JPEG e GIF');
window.location.href='javascript:history.go(-1)'
</script>";
exit;


}else{

// Verifica tamanho do arquivo
if($arquivo["size"] > $config["tamanho"])
{
$erro[] = "Arquivo em tamanho muito grande!
A imagem deve ser de no máximo " . $config["tamanho"] . " bytes.
Envie outro arquivo";

echo "<script language='JavaScript'>
alert('A imagem deve ser de no máximo ". $config["tamanho"] ." bytes');
window.location.href='javascript:history.go(-1)'
</script>";
exit;
}

// Para verificar as dimensões da imagem
$tamanhos = getimagesize($arquivo["tmp_name"]);

// Verifica largura
if($tamanhos[0] > $config["largura"])
{
$erro[] = "Largura da imagem não pose ser
maior que " . $config["largura"] . " pixels";

echo "<script language='JavaScript'>
alert('A largura da imagem nao pode ser maior que ". $config["tamanho"] ." pixels');
window.location.href='javascript:history.go(-1)'
</script>";
exit;
}



// Verifica altura
if($tamanhos[1] > $config["altura"])
{
$erro[] = "Altura da imagem não pode ser
maior que " . $config["altura"] . " pixels";

echo "<script language='JavaScript'>
alert('A altura da imagem nao pode maior que ". $config["altura"] ." pixels');
window.location.href='javascript:history.go(-1)'
</script>";
exit;
}

}

// Imprime as mensagens de erro
if(sizeof($erro))
{
foreach($erro as $err)
{
echo " - " . $err . "<BR>";
}


}

// Verificação de dados OK, nenhum erro ocorrido, executa então o upload...
else
{
// Pega extensão do arquivo
preg_match("/\.(gif|bmp|png|jpg|jpeg|swf){1}$/i", $arquivo["name"], $ext);

// Gera um nome único para a imagem
$imagem_nome = md5(uniqid(time())) . "." . $ext[1];


// Caminho de onde a imagem ficará
$imagem_dir = "../img_imoveis/album/" . $imagem_nome.;





$sql = mysql_query("INSERT INTO fotos (id_imovel, foto, obs_foto) VALUES ('$id', '$imagem_nome', '$desc_')") or print(mysql_error());

if($sql ==1){
// Faz o upload da imagem
echo $arquivo["name_tempo"];
include("resizer_foto.php");

echo "<br><br>FOTO ADICIONADA COM SUCESSO";
}else{
echo "<br><br>ERRO AO TENTATAR ADICIONAR FOTO";
}
}
}

}// fecha acação add
?>
</p>
</body>
</html>
Francine
08 Nov 2013, 16:11
Nossa, como eu não tinha lido este artigo antes.
Muito útil... e muito simples!!!
Obrigada!
Julianna Paz
04 Mar 2013, 11:29
Parabéns, objetivo e direto, me ajudou muito!
Reginaldo
09 Fev 2013, 09:37
Vc sabe se tem alguma solução para a seleção multipla de arquivos no Internet Explorer usando html ou jsp?
Allan C K Kipfer
27 Jun 2012, 11:30
Ola, colei o codigo PHP na minha página, mas ao entrar na pagina me diz o erro
Invalid argument supplied for foreach() in /home/suacidadeo1/public_html/timbo/classificados/php/1.php on line 28

[codigo]

<?php
# 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;
}


?>

[/codigo]
Copiei e colei para testar, não é o 1º tutorial de multiple upload que me da isso...
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