[MEGA-TUTORIAL] Upload simples e multiplo
[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" 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
Discussão (11)
Carregando comentários...