[MEGA-TUTORIAL] Upload simples e multiplo

Beuleal · Julho 1, 2011

[MEGA-TUTORIAL] "Do básico ao avançado!"

Olá galera,

Eu como muitos aqui no forum, tem pesquisado muitas coisas sobre "upload de arquivos", e realmente não é facil de achar algo que se encaixe perfeitamente em nosso sistema, não é mesmo? Então vamos lá, ensinarei passo a passo, explicando o que cada coisa significa.

Veremos:

Upload de UM arquivo
Upload de varios arquivos criando inputs individuais
Upload multiplo com o [shift] ou [ctrl] apertado para selecionar varios arquivos
Deixar o sistema de upload bonito, com efeitos
Inserir os dados dos arquivos em Banco de dados - MYSQL

Estudaremos:

Como o PHP reconhece os arquivos
As propriedades dos arquivos
diretivas principais do php.ini

Ao decorrer do tutorial, estudaremos outras coisas com a ajuda do PHP.NET

[MEGA-TUTORIAL] Upload simples

O upload simples é o mais facil e apartir dele que veremos: Como o php reconhece os arquivos e suas propriedades

Vamos lá!

1 - Crie um arquivo index.php onde ficará nosso formulario

<form name="upload" enctype="multipart/form-data" method="post" action="upload.php">

<input type="hidden" name="MAX_FILE_SIZE" value="10485760">
       <input type="file" name="arquivo" value="arquivo" />
<label>
<input name="enviar" type="submit" value="Enviar">
</label>

</form>

Na linha do form temos enctype="multipart/form-data" que é obrigatório quando estamos fazendo manipulamento de arquivos

Observe que tem uma linha com uma input type="hidden" name="MAX_FILE_SIZE" value="10485760". Veja o que significa:

hidden = significa que faremos uma alteração na diretiva php.ini
MAX_FILE_SIZE = significa que faremos uma alteração na diretiva MAX_FILE_SIZE
value = significa que faremos uma alteração na diretiva MAX_FILE_SIZE para o valor 10485760

O motivo dessa alteração é que o php por padrão permite fazermos upload somente até 2 MB. Veja no php.net: Tamanho Máximo de Arquivo para Upload

Se no php é 2 MB por que você especificou tudo isso de numero?

O php reconhece os arquivos por bytes e eu quero que o tamanho máximo do arquivo seja 10 mb, então:

Metodo certo:

1 kb = 1024 bytes

1 mb = 1024 kb

1 mb = 1024 x 1024 = 1048576 bytes

portanto,

10 mb = 10485760 bytes ======== VALOR EXATO

Metodo ERRADO:

Afim de simplificar essa conta, coloca-se o mb = 1000, então:

1 mb = 1000 x 1024 = 1024000 bytes

10 mb = 10240000

Consegue ver a diferença entre 10485760 bytes e 10240000 bytes ?

2 - crie o arquivo upload.php

Antes de qualquer coisa, veja como o php trata o arquivo, colocando somente esse script na pagina:

echo "<pre>";
print_r($_FILES);
echo "</pre>";

você obterá algo assim:


Array
(
   [arquivo] => Array
       (
           [name] => Array
               (
                   [0] => Car_Grey.png
               )

           [type] => Array
               (
                   [0] => image/png
               )

           [tmp_name] => Array
               (
                   [0] => /home/storage/5/2c/1c/seusite/tmp/phpDP767M
               )

           [error] => Array
               (
                   [0] => 0
               )

           [size] => Array
               (
                   [0] => 4488
               )

       )

)

Dando uma estudada aqui no PHP, saberemos que cada arquivo tem 5 propriedades:

name = Nome original do arquivo
type = tipo de arquivo, podendo ser image/jpg....
tmp_name = local e nome temporário (para onde o arquivo vai antes de fazer a mudança dele) do arquivo
error = caso haja erro no upload
size = arquivo medido em bytes. Acabamos de ver isso =)

Agora vamos realizar o upload, colocando esse codigo na pagina:


<?php

$diretorio = "suapasta/";

if (!is_dir($diretorio)){ echo "Pasta $diretorio nao existe";} 

else { echo"Pasta Existe<br>";

$arquivo=$_FILES["arquivo"];

$destino = $diretorio."/".$arquivo['name'];

if (move_uploaded_file($arquivo['tmp_name'],$destino)) {echo "MOVEUUUUUU<br>"; }

else {echo "NAOOOO MOVEU";}

}// fecha else

?>

Primeira coisa antes de ver se ira funcionar ou não, é criar a pasta no servidor e atribuir "777" nela (o conhecido chmod), ou seja, todas as permições. Para atribuir clique com o botão direito nela e procure algo como attribute...

Feito isso, vamos entender o que o código esta dizendo:

A $diretorio esta procurando a pasta que você criou, portanto diga a ela onde ela está.

!is_dir = verifica se a pasta existe, caso nao escreva nao existe, caso sim continua com o upload

$arquivo=$_FILES["arquivo"]; = pega a variavel arquivo que esta vindo do form

$destino = local e como a imagem devera estar. Se você nao sabe, não mexe.

move_uploaded_file = a função que move o arquivo enviado. Dê uma lida Aqui para conhecer mais

Simples né!

[MEGA-TUTORIAL]Upload de varios arquivos criando inputs individuais

1 - Crie um arquivo index.php onde ficará nosso formulario

<form name="upload" enctype="multipart/form-data" method="post" action="upload.php">

<input type="hidden" name="MAX_FILE_SIZE" value="10485760">
       <input type="file" name="arquivo[]" />
       <input type="file" name="arquivo[]" />
       <input type="file" name="arquivo[]" />	
<input name="enviar" type="submit" value="Enviar">

</form>

Em name colocamos [] ao lado do nome, pois ele cria uma lista de arquivos, chamada matriz, o que pode ser visto a seguir.

2 - Crie o arquivo upload.php

Antes de qualquer coisa, veja como o php trata os arquivo, colocando somente esse script na pagina:

echo "<pre>";
print_r($_FILES);
echo "</pre>";

você obterá algo assim:


Array
(
   [arquivo] => Array
       (
           [name] => Array
               (
                   [0] => BoatEquipment_Red.png
                   [1] => DieselLocomotive_Boxcar_Blue.png
                   [2] => elvis.ico
               )

           [type] => Array
               (
                   [0] => image/png
                   [1] => image/png
                   [2] => image/x-icon
               )

           [tmp_name] => Array
               (
                   [0] => /home/storage/5/2c/1c/suapagina/tmp/phpIcWMp7
                   [1] => /home/storage/5/2c/1c/suapagina/tmp/phpF1rmN7
                   [2] => /home/storage/5/2c/1c/suapagina/tmp/phpJi0vk8
               )

           [error] => Array
               (
                   [0] => 0
                   [1] => 0
                   [2] => 0
               )

           [size] => Array
               (
                   [0] => 5357
                   [1] => 3836
                   [2] => 26614
               )

       )

)

Para realizar o upload usaremos o código:


$diretorio = "suapasta/";


if (!is_dir($diretorio)){ echo "Pasta $diretorio nao existe";} 


else { echo "A Pasta Existe<br>";


			$arquivo = isset($_FILES['arquivo']) ? $_FILES['arquivo'] : FALSE;

				for ($k = 0; $k < count($arquivo['name']); $k++)
					{
					   $destino = $diretorio."/".$arquivo['name'][$k];

					    if (move_uploaded_file($arquivo['tmp_name'][$k], $destino)) {echo "MOVEUUUUUU<br>"; }

					    else {echo "NAOOOO MOVEU";}
					}		



} // fecha else

Aqui vemos varios códigos interressantes alem do que vimos anteriormente e que se repetem aqui.

Na linha $arquivo = isset($_FILES['arquivo']) ? $_FILES['arquivo'] : FALSE; vemos um "?" e ":". Eles são operadores de condições, leia mais sobre em Operadores de Comparação

Outro código visto é o "for", onde através dele repetimos a mesma ação para todos os objetos. Criamos uma variavel $k somente para realizar a contagem dos arquivos e fazer ação no próximo arquivo, ao inves de fazer somente em um, dando um loop e realizando o upload somente do primeiro arquivo.

[MEGA-TUTORIAL]Upload multiplo com o [shift] ou [ctrl] apertado para selecionar varios arquivos

A lógica nesse caso é a mesma utilizada anteriormente.

1 - Crie um arquivo index.php onde ficará nosso formulario

<form name="upload" enctype="multipart/form-data" method="post" action="upload.php">

<input type="hidden" name="MAX_FILE_SIZE" value="10485760">
       <input type="file" name="arquivo[]" multiple="multiple" />
       <input name="enviar" type="submit" value="Enviar">

</form>

Observemos que foi criado somente um objeto que permite realizar o upload, porem dando direito a você selecionar varios, apertando o [shift] ou o [ctrl]. Isso se dá a utilização de multiple="multiple" dentro da input. Alguns navegadores aceitam somente multiple, porem outros não.

Outra coisa essencial é a utilização de [] para criar matriz.

2 - Crie o arquivo upload.php

Antes de qualquer coisa, veja como o php trata os arquivo, colocando somente esse script na pagina:

echo "<pre>";
print_r($_FILES);
echo "</pre>";

você obterá algo assim:


Array
(
   [arquivo] => Array
       (
           [name] => Array
               (
                   [0] => BoatEquipment_Red.png
                   [1] => DieselLocomotive_Boxcar_Blue.png
                   [2] => elvis.ico
                   [3] => hello_world.ico
               )

           [type] => Array
               (
                   [0] => image/png
                   [1] => image/png
                   [2] => image/x-icon
                   [2] => image/x-icon
               )

           [tmp_name] => Array
               (
                   [0] => /home/storage/5/2c/1c/suapagina/tmp/phpIcWMp7
                   [1] => /home/storage/5/2c/1c/suapagina/tmp/phpF1rmN7
                   [2] => /home/storage/5/2c/1c/suapagina/tmp/phpJi0vk8
                   [3] => /home/storage/5/2c/1c/suapagina/tmp/phpJi0vi1
               )

           [error] => Array
               (
                   [0] => 0
                   [1] => 0
                   [2] => 0
                   [3] => 0
               )

           [size] => Array
               (
                   [0] => 5357
                   [1] => 3836
                   [2] => 26614
                   [2] => 16642
               )

       )

)

Para realizar o upload usaremos o código:


$diretorio = "suapasta/";


if (!is_dir($diretorio)){ echo "Pasta $diretorio nao existe";} 


else { echo "A Pasta Existe<br>";


			$arquivo = isset($_FILES['arquivo']) ? $_FILES['arquivo'] : FALSE;

				for ($k = 0; $k < count($arquivo['name']); $k++)
					{
					   $destino = $diretorio."/".$arquivo['name'][$k];

					    if (move_uploaded_file($arquivo['tmp_name'][$k], $destino)) {echo "MOVEUUUUUU<br>"; }

					    else {echo "NAOOOO MOVEU";}
					}		



} // fecha else

Observe que é o mesmo código utilizado no exemplo anterior.

POREM...... Como com esse tutorial você pode enviar infinitos arquivos, você deve ter uma diretiva em seu php.ini chamada:

max_file_uploads = a quantidade máxima de arquivos que pode ser enviado

E outros ajustes que devem ser feitos em sua diretivas:

]
file_uploads = On

upload_max_filesize = 50M
//Teoricamente = Tamanho máximo por upload, pois mudamos isso usando a hidden

upload_tmp_dir = local no servidor onde os arquivos enviados ficarão temporariamente, ou seja, até o move_uploaded_file chamar ele

post_max_size  = 50M
//Teoricamente = Tamanho máximo do Upload em um todo. Obs eu deixo o mesmo valor que upload_max_filesize

max_input_time = 60
//60 segundos é o tempo máximo de espera do upload. Se ele exceder esse tempo, ele vai enviar somente o que deu para carregar em 60s. Ou seja, se você tem uma net que faz upload a 50 kbps, em 60 segundos você envia um arquivo de aprox. 3000 kb. Mas é logico que se você tiver essa internet e quiser fazer um upload de 50 mb não vai dar. Portanto, avalie a sua conexao e de seus clientes.

max_execution_time = 60
//Defina o mesmo valor de max_input_time.

memory_limit = 64M
//Teoricamente = Tamanho máximo do Upload que pode ser salvo na memoria (pasta temporaria)

memory_limit

Esse são os meus valores. Sempre utilizei e nunca me deu problemas.

Quanto ao significado das diretivas eu coloquei a função dela, agora o que realmente é terei que fazer um estudo em diretivas.

[MEGA-TUTORIAL]Upload registrando dados em um banco de dados MYSQL

Para fazer isso, temo ter certeza que o arquivo esta sendo movido para sua pasta destino.

Com essa certeza, podemos então fazer qualquer coisa com o banco de dados inserindo os codigos no arquivo upload.php. Observe:


$diretorio = "suapasta/";


if (!is_dir($diretorio)){ echo "Pasta $diretorio nao existe";} 


else { echo "A Pasta Existe<br>";


			$arquivo = isset($_FILES['arquivo']) ? $_FILES['arquivo'] : FALSE;

				for ($k = 0; $k < count($arquivo['name']); $k++)
					{
					   $destino = $diretorio."/".$arquivo['name'][$k];

					    if (move_uploaded_file($arquivo['tmp_name'][$k], $destino))
                                                  {

                                                   echo "MOVEUUUUUU<br>"; 
                                                  ---------------================= COMANDOS   MYSQL ========================-----------------

                                                  }

					    else {echo "NAOOOO MOVEU";}
					}		



} // fecha else

OBS: esse exemplo se refere a multiplos arquivos.

Fácil né?

[MEGA-TUTORIAL]Deixando o upload mais bonito...

Aqui eu vou demonstrar algo facil nada muito complexo. Utilizarei de java, html, e php.

Todos os efeitos devem ser colocados no form, não mexeremos com o upload.php

O que faremos:

Mostrar algo ao clicar em enviar
Colocar uma barra de "carregando"
Trocar o botão enviar
Travar/ Desabilitar botão enviar

[MEGA-TUTORIAL]Mostrar algo ao clicar em enviar

Utilizarei de um java facil, se você utiliza de jquery, ficará melhor ainda, e seria legal você postar aqui como reposta para eu publicar com o seu nome em um próximo tutorial.

1 - Crie o form

<form name="upload" enctype="multipart/form-data" method="post" action="upload.php">

<input type="hidden" name="MAX_FILE_SIZE" value="10485760">
       <input type="file" name="arquivo[]" multiple="multiple" />
       <input name="enviar" type="submit" value="Enviar">

</form>

Agora vem o segredo...

Coloque antes do </head> o codigo:


<script type="text/javascript">
function showlayer(layer){
var myLayer = document.getElementById(layer).style.display;
if(myLayer=="none"){
document.getElementById(layer).style.display="none";
} else { 
document.getElementById(layer).style.display="block";
}
}

</script>

No BOTAO enviar coloque o evento, que ao clicar chame esse java script:

onclick="javascript:show('oculto')"

Esse oculto se refere a uma div que terá id = oculto. Portanto, vamos cria-la logo abaixo do form.

<div id="oculto">
Aguarde enquanto seu Upload esta sendo realizado....<br /><br />
</div>

Se deixarmos dessa maneira, a div será mostrada assim que carregar a página, portanto, devemos esconde-la, usando CSS.

Coloque em sua lista de style os seguintes estilos:

<style type="text/css">
#oculto {
display: none;
margin-top: 30px;
}

</style>

Quanto mais você souber de CSS melhor pois ficara mais bonito!

OBS: Para cada onclick diferente, você deve fazer uma div e um style.

Pronto! Facil também né?

[MEGA-TUTORIAL]Colocar uma barra de "carregando"

Com base no item anterior, para colocarmos uma barra de carregando, mexeremos somente na div.

Uma dica muito legal, é você fazer a sua com as suas cores. Clique Aqui

Com a sua imagem de carregando pronta, adcione na div, ficando assim:

<div id="oculto">
Aguarde enquanto seu Upload esta sendo realizado....<br /><br />
<img src = "carregando.gif">
</div>

Pronto!

[MEGA-TUTORIAL]Trocar o botão enviar

Para trocar o botão enviar, devemos somente alterar a input type = "submit", ficando assim

<input type="image" name="enviar" src="botaoenviar.png" value="ENVIAR" alt="Clique aqui para enviar suas fotos" onclick="javascript:show('oculto')" />

input type = image??

Sim, quando atribuimos type=image, a pagina reconhece que é um botao de submit e que ao inves de mostrar aquele botao feio ela mostra uma imagem localizada em src="".

Pronto!

[MEGA-TUTORIAL]Travar/ Desabilitar o botão enviar

Para isso, devemos alterar as propriedades de form, acrescentando:

onsubmit="this.elements['botaoenviar'].disabled=true;"

Ficando:

<form name="upload" enctype="multipart/form-data" method="post" action="upload.php" onsubmit="this.elements['botaoenviar'].disabled=true;" >

para funcionar, verifique se onde esta botaoenviar é o mesmo nome do botão que envia.

Pronto!

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Pronto Acabou!

Desculpe o tamanho mas acho que ajudará muita gente.

Eu tive trabalho pra escrever tudo isso e testar as paginas, então diga ao menos um Obrigado! e se quiser publicar entre em contato comigo mandando mp.

Att.

Brenno Leal

Matias Rezende · Julho 1, 2011

<input type="file" name="arquivo[]" multiple="multiple" />

Esta eu não conhecia. Bem legal o tutorial sim. A sugestão que eu faço é ter uma indentação mais consistente. Melhora a visibilidade do código.

Carlos Eduardo

Beuleal · Julho 1, 2011

como assim identação?

Matias Rezende · Julho 1, 2011

Indentação

Sem indentação:

<?php

$diretorio = "suapasta/";

if (!is_dir($diretorio)){ echo "Pasta $diretorio nao existe";} 

else { echo"Pasta Existe<br>";

$arquivo=$_FILES["arquivo"];

$destino = $diretorio."/".$arquivo['name'];

if (move_uploaded_file($arquivo['tmp_name'],$destino)) {echo "MOVEUUUUUU<br>"; }

else {echo "NAOOOO MOVEU";}

}// fecha else

?>

Com Indentação

<?php
$diretorio = "suapasta/";
if (! is_dir ( $diretorio )) {
echo "Pasta $diretorio nao existe";
} else {
echo "Pasta Existe<br>";
$arquivo = $_FILES ["arquivo"];
$destino = $diretorio . "/" . $arquivo ['name'];
if (move_uploaded_file ( $arquivo ['tmp_name'], $destino )) {
	echo "MOVEUUUUUU<br>";
} else {
	echo "NAOOOO MOVEU";
}
}

Carlos Eduardo

Beuleal · Julho 1, 2011

entendi... valeu a dica... farei desta forma no meu proximo que vai ser sobre... haha!

Teu · Julho 13, 2011

Brenno Leal, você é o cara!

Valeu pelo tuto, ajudou demais, e espero que as pessoas o encontrem, foi o melhor que eu encontrei na web, e olha que procurei e muito.

Você explicou muito bem o código, super tranquilo, me ajudou muito, mas muito mesmo!

O melhor que eu ja vi com relação a este assunto!

Shooowwww

MUITO OBRIGADOOO BROTHER!

você É FERA!

Teu

:joia:=)

Teu · Julho 13, 2011

Brenno, tomei a liberdade de colocar aqui o script de carregando com jquery..

Muito bacana e muito simples de editar.

1 - Baixem a biblioteca do Jquery v1.6.2

Temos que fazer referência a biblioteca jquery em nosso arquivo antes da tag </head>, eu coloquei dentro da pasta js pra ficar separado ficando assim.

<script src="js/jquery.js"></script>

Css da Div oculto

<style type="text/css">
 #oculto {
    display:none;
    margin-top: 30px;
 }
</style>

Criando o Script jquery

<script type="text/javascript">

$(document).ready(function(){
  $("#Valor").click(function(event){
    $("#oculto").show();
  });
});
</script>

#Valor é o id que dei para o button e #oculto é a id da div que vai exibir a mensagem de carregando, aguarde, etc.

 <input name="enviar" type="submit" value="Enviar" id="Valor" >

Espero ter ajudado um pouquinho com esse mega-tutorial fantastico que o Breno criou.

Valeu gente.

Teu

=)

Beuleal · Julho 15, 2011

cara, se funcionou com o jquery como você diz ficou show de bola!

Pois eu estava tentando algo com jquery, mas sempre que eu adcionava um id ao botao, não acontecia nada, nem enviava, nem mostrava.

Valeu ai pela dica!

nigh2lf · Setembro 3, 2014

Obrigado pelo TUTO, foi de grande ajuda, abração!

Beuleal · Dezembro 2, 2014

Fico feliz que tenha contribuído ajudando vocês, e principalmente, por ser um dos tópicos de grande visualização!

Wesley Santos · Fevereiro 20, 2016

Se me permite postar, fiz alguns ajuste para verificar o tipo de arquivo enviado e também alterar o nome da foto para não ter nenhum nome igual no banco, segue o código:

$arquivo = isset($_FILES['foto']) ? $_FILES['foto'] : FALSE;
// lembrado que $_FILES['foto']  é o nome que você deixa no formulário 

for ($k = 0; $k < count($arquivo['name']); $k++){

// Lista de tipos de arquivos permitidos
  $tiposPermitidos= array('image/jpeg', 'image/pjpeg', 'image/png');
  
  // O nome original do arquivo no computador do usuário
  $arqName = $_FILES['foto']['name'];
  
  // O tipo mime do arquivo. Um exemplo pode ser "image/gif"
  $arqType = $_FILES['foto']['type'];
    
  // O nome temporário do arquivo, como foi guardado no servidor
  $arqTemp = $_FILES['foto']['tmp_name'];

   // Verifica o tipo de arquivo enviado
    if (array_search($arqType[$k], $tiposPermitidos) === false) {
      echo 'O tipo de arquivo '.$arqName[$k] .' enviado é inválido!';
	  
    // Não houveram erros, move o arquivo
    } else {
      $pasta = '../img/galeria/';
	  
      // Pega a extensão do arquivo enviado
      $extensao = strtolower(end(explode('.', $arqName[$k])));
	  
      // Define o novo nome do arquivo usando um UNIX TIMESTAMP
      $nome = time() . $k . '.' . $extensao;
	  
      $upload = move_uploaded_file($arqTemp[$k], $pasta . $nome);
	  
      // Verifica se o arquivo foi movido com sucesso
      if ($upload == true) {
		
	// Cria uma query MySQL
           echo 'Foto '.$arqName[$k] .' foi enviada com sucesso, estamos redirecionando você. <br>';
	  }else{
		  echo ' Ocorreu algum erro.' ;
                }

	}
}
?>

reaprod · Março 27, 2017

Gostei demais do post...

Mas tenho algumas duvidas:

Como acontece o registro dos nomes das fotos no banco de dados para depois ser puxado pelo php?

exemplo:

faço upload multiplo de 6 fotos... cada uma tem seu nome, no banco de dados eu crio uma tabela e nela um campo pra cada nome?

foto, foto1, foto2, foto3, foto4, foto5

como é que cada campo vai buscar esse nome?

alguém pode ajudar?

Arquivado

[MEGA-TUTORIAL] Upload simples e multiplo

Recommended Posts

Beuleal 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Matias Rezende 50

Compartilhar este post

Link para o post

Compartilhar em outros sites

Beuleal 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Matias Rezende 50

Compartilhar este post

Link para o post

Compartilhar em outros sites

Beuleal 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Teu 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Teu 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Beuleal 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

nigh2lf 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Beuleal 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Wesley Santos 28

Compartilhar este post

Link para o post

Compartilhar em outros sites

reaprod 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Javascript - Calcular Valores Monetário em Tempo Real

JavaScript - Exibir logo dentro da Tabela html

PHP+Codeigniter - Implementar o Input CÓDIGO ou ID do Produto

Fóruns

Tempo Real

Informação importante