[MEGA-TUTORIAL] Upload simples e multiplo - Tutoriais & Dicas - PHP - Fórum Script Brasil
[MEGA-TUTORIAL] Upload simples e multiplo
Asked by beuleal
[MEGA-TUTORIAL] "Do básico ao avançado!"
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.
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
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
1 - Crie um arquivo index.php onde ficará nosso formulario
<form name="upload" enctype="multipart/form-data" method="post" action="upload.php">
<input type="file" name="arquivo" value="arquivo" />
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:
[arquivo] => Array
[0] => Car_Grey.png
[0] => /home/storage/5/2c/1c/seusite/tmp/phpDP767M
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:
$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
<input type="file" name="arquivo[]" />
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:
[0] => BoatEquipment_Red.png
[1] => DieselLocomotive_Boxcar_Blue.png
[2] => elvis.ico
[2] => image/x-icon
[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
[2] => 26614
Para realizar o upload usaremos o código:
else { echo "A Pasta Existe<br>";
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>"; }
} // 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
<input type="file" name="arquivo[]" multiple="multiple" />
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:
[3] => hello_world.ico
[3] => /home/storage/5/2c/1c/suapagina/tmp/phpJi0vi1
[2] => 16642
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:
//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
//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.
//Defina o mesmo valor de max_input_time.
//Teoricamente = Tamanho máximo do Upload que pode ser salvo na memoria (pasta temporaria)
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:
if (move_uploaded_file($arquivo['tmp_name'][$k], $destino))
echo "MOVEUUUUUU<br>";
---------------================= COMANDOS   MYSQL ========================-----------------
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
Agora vem o segredo... Coloque antes do </head> o codigo:
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.
Aguarde enquanto seu Upload esta sendo realizado....<br /><br />
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:
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:
<img src = "carregando.gif">
[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;"
<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.
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.
Edited July 1, 2011 by beuleal
zaraki scofild 0
não teria como colocar esses codigos em um arquivo zip para ser baixado , seria muito bom ,agradeço a atenção