Ir para conteúdo
Fórum Script Brasil
  • 0

[MEGA-TUTORIAL] Upload simples e multiplo

beuleal

Perguntado por beuleal,

 Share

Pergunta

beuleal

beuleal

Postado
Postado (editado)
[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

Editado por beuleal
Link para o comentário
Compartilhar em outros sites

3 respostass a esta questão

Posts Recomendados

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,4k
×
×
  • Criar Novo...