Publicado em 1 de jul.

[MEGA-TUTORIAL] Upload simples e multiplo

[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??

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:

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

Discussão (11)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Carregando comentários...