Jump to content
Fórum Script Brasil
  • 0

[MEGA-TUTORIAL] Upload simples e multiplo

beuleal

Asked by beuleal,

 Share

Question

beuleal

beuleal

Posted
Posted (edited)
[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 não 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 não escreva não 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ê não 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 não 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 invés 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 não 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 não 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="java script: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="java script:show('oculto')" />
input type = image?? Sim, quando atribuimos type=image, a pagina reconhece que é um botao de submit e que ao invés 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!

Estou começando meu próximo, se você tivel algo que queria me ajudar a disponibilizar me mande mp que colocarei com seus creditos!

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

Edited by beuleal
Link to comment
Share on other sites

3 answers to this question

Recommended Posts

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing


  • Forum Statistics

    • Total Topics
      152.2k
    • Total Posts
      652k
×
×
  • Create New...