Beuleal 4 Denunciar post Postado Julho 1, 2011 [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 Compartilhar este post Link para o post Compartilhar em outros sites
Matias Rezende 50 Denunciar post Postado Julho 1, 2011 <input type="file" name="arquivo[]" multiple="multiple" /> Esta eu não conhecia. Bem legal o tutorial sim. A sugestão que eu faço é ter uma indentação mais consistente. Melhora a visibilidade do código. Carlos Eduardo Compartilhar este post Link para o post Compartilhar em outros sites
Beuleal 4 Denunciar post Postado Julho 1, 2011 como assim identação? Compartilhar este post Link para o post Compartilhar em outros sites
Matias Rezende 50 Denunciar post Postado Julho 1, 2011 Indentação Sem indentação: <?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 ?> Com Indentação <?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"; } } Carlos Eduardo Compartilhar este post Link para o post Compartilhar em outros sites
Beuleal 4 Denunciar post Postado Julho 1, 2011 entendi... valeu a dica... farei desta forma no meu proximo que vai ser sobre... haha! Compartilhar este post Link para o post Compartilhar em outros sites
Teu 0 Denunciar post Postado Julho 13, 2011 Brenno Leal, você é o cara! Valeu pelo tuto, ajudou demais, e espero que as pessoas o encontrem, foi o melhor que eu encontrei na web, e olha que procurei e muito. Você explicou muito bem o código, super tranquilo, me ajudou muito, mas muito mesmo! O melhor que eu ja vi com relação a este assunto! Shooowwww MUITO OBRIGADOOO BROTHER! você É FERA! Teu :joia:=) Compartilhar este post Link para o post Compartilhar em outros sites
Teu 0 Denunciar post Postado Julho 13, 2011 Brenno, tomei a liberdade de colocar aqui o script de carregando com jquery.. Muito bacana e muito simples de editar. 1 - Baixem a biblioteca do Jquery v1.6.2 Temos que fazer referência a biblioteca jquery em nosso arquivo antes da tag </head>, eu coloquei dentro da pasta js pra ficar separado ficando assim. <script src="js/jquery.js"></script> Css da Div oculto <style type="text/css"> #oculto { display:none; margin-top: 30px; } </style> Criando o Script jquery <script type="text/javascript"> $(document).ready(function(){ $("#Valor").click(function(event){ $("#oculto").show(); }); }); </script> #Valor é o id que dei para o button e #oculto é a id da div que vai exibir a mensagem de carregando, aguarde, etc. <input name="enviar" type="submit" value="Enviar" id="Valor" > Espero ter ajudado um pouquinho com esse mega-tutorial fantastico que o Breno criou. Valeu gente. Teu =) Compartilhar este post Link para o post Compartilhar em outros sites
Beuleal 4 Denunciar post Postado Julho 15, 2011 cara, se funcionou com o jquery como você diz ficou show de bola! Pois eu estava tentando algo com jquery, mas sempre que eu adcionava um id ao botao, não acontecia nada, nem enviava, nem mostrava. Valeu ai pela dica! Compartilhar este post Link para o post Compartilhar em outros sites
nigh2lf 0 Denunciar post Postado Setembro 3, 2014 Obrigado pelo TUTO, foi de grande ajuda, abração! Compartilhar este post Link para o post Compartilhar em outros sites
Beuleal 4 Denunciar post Postado Dezembro 2, 2014 Fico feliz que tenha contribuído ajudando vocês, e principalmente, por ser um dos tópicos de grande visualização! Compartilhar este post Link para o post Compartilhar em outros sites
Wesley Santos 28 Denunciar post Postado Fevereiro 20, 2016 Se me permite postar, fiz alguns ajuste para verificar o tipo de arquivo enviado e também alterar o nome da foto para não ter nenhum nome igual no banco, segue o código: $arquivo = isset($_FILES['foto']) ? $_FILES['foto'] : FALSE; // lembrado que $_FILES['foto'] é o nome que você deixa no formulário for ($k = 0; $k < count($arquivo['name']); $k++){ // Lista de tipos de arquivos permitidos $tiposPermitidos= array('image/jpeg', 'image/pjpeg', 'image/png'); // O nome original do arquivo no computador do usuário $arqName = $_FILES['foto']['name']; // O tipo mime do arquivo. Um exemplo pode ser "image/gif" $arqType = $_FILES['foto']['type']; // O nome temporário do arquivo, como foi guardado no servidor $arqTemp = $_FILES['foto']['tmp_name']; // Verifica o tipo de arquivo enviado if (array_search($arqType[$k], $tiposPermitidos) === false) { echo 'O tipo de arquivo '.$arqName[$k] .' enviado é inválido!'; // Não houveram erros, move o arquivo } else { $pasta = '../img/galeria/'; // Pega a extensão do arquivo enviado $extensao = strtolower(end(explode('.', $arqName[$k]))); // Define o novo nome do arquivo usando um UNIX TIMESTAMP $nome = time() . $k . '.' . $extensao; $upload = move_uploaded_file($arqTemp[$k], $pasta . $nome); // Verifica se o arquivo foi movido com sucesso if ($upload == true) { // Cria uma query MySQL echo 'Foto '.$arqName[$k] .' foi enviada com sucesso, estamos redirecionando você. <br>'; }else{ echo ' Ocorreu algum erro.' ; } } } ?> Compartilhar este post Link para o post Compartilhar em outros sites
reaprod 1 Denunciar post Postado Março 27, 2017 Gostei demais do post... Mas tenho algumas duvidas: Como acontece o registro dos nomes das fotos no banco de dados para depois ser puxado pelo php? exemplo: faço upload multiplo de 6 fotos... cada uma tem seu nome, no banco de dados eu crio uma tabela e nela um campo pra cada nome? foto, foto1, foto2, foto3, foto4, foto5 como é que cada campo vai buscar esse nome? alguém pode ajudar? Compartilhar este post Link para o post Compartilhar em outros sites
