Upload de Vários Arquivos Com PHP 5

Upload de vrios arquivos com PHP 22.
856 visualizaes 21 Fala pessoal, hoje irei ensinar a fazer upload de vrios arquivos de uma vez, ou seja, ao invs de criar apenas um campo para o usurio selecionar o arquivo, vamos criar mltiplos campos e fazer o upload de cada arquivo para o servidor atravs do PHP. Clique aqui para fazer download do cdigo 1. Formulrio Vamos criar nosso formulrio, vou utilizar aqui como exemplo cinco campos para upload: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Upload de vrios arquivos com PHP</title> </head> <body> <h1>Upload de vrios arquivos com PHP</h1> <form action="<?php echo $_SERVER['PHP_SELF'] ?>" method="post" enctype="multipart/form-data"> <p><input type="file" name="arquivo[]" /></p> <p><input type="file" name="arquivo[]" /></p> <p><input type="file" name="arquivo[]" /></p> <p><input type="file" name="arquivo[]" /></p> <p><input type="file" name="arquivo[]" /></p> <p><input type="submit" value="Enviar" /></p> </form> </body> </html> Criamos um formulrio e na action definimos que os dados sero enviados para o prprio arquivo, atravs do $_SERVER['PHP_SELF']. Cada campo de upload receber o mesmo nome, ou seja, arquivo, porm iremos colocar [] (colchetes) para que assim o php
interprete como um array, onde cada arquivo receber um ndice e assim ns poderemos manipular esses arquivos. * Lembrando que quando se trata de upload devemos definir a propriedade enctype=multipart/form-data; 2. Upload com PHP J que os dados sero enviados ao mesmo arquivo, vamos colocar nosso cdigo PHP nesse mesmo arquivo, vou optar por coloc-lo entre o header 1 (h1) e o nicio do formulrio: 1 <?php 2 // DEFINIES 3 // Numero de campos de upload 4 $numeroCampos = 5; 5 // Tamanho mximo do arquivo (em bytes) 6 $tamanhoMaximo = 1000000; 7 // Extenses aceitas 8 $extensoes = array(".doc", ".txt", ".pdf", ".docx"); 9 // Caminho para onde o arquivo ser enviado 10 $caminho = "uploads/"; 11 // Substituir arquivo j existente (true = sim; false = nao) 12 $substituir = false; 13 14 for ($i = 0; $i < $numeroCampos; $i++) { 15 16 // Informaes do arquivo enviado 17 $nomeArquivo = $_FILES["arquivo"]["name"][$i]; 18 $tamanhoArquivo = $_FILES["arquivo"]["size"][$i]; 19 $nomeTemporario = $_FILES["arquivo"]["tmp_name"][$i]; 20 21 // Verifica se o arquivo foi colocado no campo 22 if (!empty($nomeArquivo)) { 23 24 $erro = false; 25 26 // Verifica se o tamanho do arquivo maior que o permitido 27 if ($tamanhoArquivo > $tamanhoMaximo) { 28 $erro = "O arquivo " . $nomeArquivo . " no deve 29 ultrapassar " . $tamanhoMaximo. " bytes"; 30 } 31 // Verifica se a extenso est entre as aceitas
32 elseif (!in_array(strrchr($nomeArquivo, "."), $extensoes)) { 33 $erro = "A extenso do arquivo <b>" . $nomeArquivo . 34 "</b> no vlida"; 35 } 36 // Verifica se o arquivo existe e se para substituir 37 elseif (file_exists($caminho . $nomeArquivo) and !$substituir) { 38 $erro = "O arquivo <b>" . $nomeArquivo . "</b> j existe"; 39 } 40 41 // Se no houver erro 42 if (!$erro) { 43 // Move o arquivo para o caminho definido 44 move_uploaded_file($nomeTemporario, ($caminho . 45 $nomeArquivo)); 46 // Mensagem de sucesso 47 echo "O arquivo <b>".$nomeArquivo."</b> foi enviado 48 com sucesso. <br />"; 49 } 50 // Se houver erro 51 else { 52 // Mensagem de erro 53 echo $erro . "<br />"; } } } ?> Bom, apesar do cdigo estar comentado, vou tentar detalhar o mximo possvel: Linha 4: Definimos o nmero de campos para enviar arquivo, no nosso caso, 5; Linha 6: Definimos o tamanho mximo de cada arquivo, em bytes, no caso equivalente a aproximadamente 1MB; Linha 8: Definimos todas as extenses vlidas e colocamos em um array; Linha 10: Definimos a pasta onde os arquivos sero gravados (no esquea de colocar uma / barra depois do nome da pasta); Linha 12: Definimos se deve ser ou no substituido um arquivo j existente, quando false, o arquivo no ser substituido, quando true, o arquivo ser substituido; Linha 14: Fazemos um loop para recuperar os dados, fazer a verificao e upload de cada campo de upload, o loop s ir terminar quando nosso contador ($i) for igual ao nmero de campos; Linhas 17, 18, 19: Recuperamos as informaes do arquivo do campo;
Linhas 27, 28, 29: Se o tamanho do arquivo for maior que o definido, ser gerado um erro; Linhas 31, 32, 33: Pegamos a extenso do arquivo atravs da funo strrchr() e verificamos se ela est contida no array das extenses vlidas, se no estiver, ser gerado um erro; Linhas 35, 36, 37: Verificamos se o arquivo j existe e se deve ser substituido ou no; Linhas 40 a 45: Se no houver nenhum erro, movemos o arquivo que foi enviado para o caminho definido e exibimos a mensagem de sucesso, caso contrrio um erro ser exibido. Bom, espero que vocs tenham entendido. Qualquer dvida entre em contato, ok? Espero que esse artigo tenha sido til a vocs, abraos.
Formulrio dinmico com jQuery Bom galera , o primeiro post aqui e venho trazer a vocs uma forma de otimizar as pginas de cadastro com um formulrio dinmico atravs do jQuery. Qual a ideia ? A princpio a ideia inserir o formulrio de acordo com a demanda, no sobrecarregando a pgina com elementos que possivelmente no iram ser usados e identificar cada campo com o atributo name diferente para recuper-los mais tarde. Bom, acho que consegui me expressar ento vamos botar a mo na massa! HTML Primeiramente precisamos de nosso formulrio ? Cdigo 01<form method="get" action="processa.php"> 02<table> 03 04 05 06 07 08 09 10 11 12 13 <thead> <tr> <th>Item</th> <th>Quantidade</th> </tr> </thead> <tbody> <tr> <td><input type="text" name="item1" size="60" /></td> <td><input type="text" name="quantidade1" size="10" /></td> </tr>
14
</tbody>
15</table> 16 17<input type="hidden" value="1" name="quantidade_itens" /> 18</form> Agora precisamos de dois elementos que posteriormente iro disparar o envio do formulrio e a insero de novos inputs. ?
Cdigo 1<a href="#" id="enviar">Enviar lista de compras</a> 2<a href="#" id="mais">Add Item</a> jQuery Para enviar o formulrio, iremos associar o seu mtodo .submit() ao evento .click() de um dos elementos que criamos para este fim. Aqui utilizaremos o link com id enviar. ? Cdigo 1// JavaScript Document 2$('#enviar').click(function(){ 3 $('form').submit();
4}); E Agora o X da questo! Dentro do evento .click() do link com id mais vamos:
1. Armazenar numa varivel a quantidade de linhas de nossa tabela. 2. Inserir o cdigo html da linha que contm os inputs com a propriedade name concatenada com o nmero da linha a ser inserida que armazenamos na varivel next. 3. E por fim atualizar o valor do elemento :hidden que usamos para armazenar a quantidade de linhas. ? Cdigo 01$('#mais').click(function(){ 02 03 04 05 06 07 08 09 10 11 12 13 14 15 return false; //armazenando a quantidade de linhas ou registros no elemento hidden $(':hidden').val(next); //inserindo formulrio $('#lista tbody').append('<tr>' + '<td><input type="text" name="item' + next + '" /></td>' + '<td><input type="text" name="quantidade' + next + '" /></td>' + '</tr>'); //recuperando o prximo numero da linha var next = $('#lista tbody').children('tr').length + 1;
16});
Mas pra que serve saber a quantidade de linhas de registros neste formulrio ? simples, como criamos o formulrio dinmico, devemos informar pgina que ir receber os dados qual a quantidade de registros que ela ir receber. Pronto, o script j est funcionando. Mas para um melhor entendimento mostraremos como a pgina ir receber estes dados. PHP A pagina dever conter uma varivel para recuperar a quantidade de itens, (lembra aquela que comentamos ?) e um loop que ter como limite nossa varivel. Dentro dele basta recuperar os valores concatenando a propriedade name do campo com o nmero da repetio. ? Cdigo 01<?php 02 03 04 05 06 07 08 09 10 11 12 } //aqui seu cdigo com o uso dos valores capturados $item = $_GET["item$x"]; $quantidade = $_GET["quantidade$x"]; for ( $x = 1; $x <= $quantidade_itens ; $x++ ){ $quantidade_itens = $_GET['quantidade_itens'];
13?>
Veja a
Demo O que fizemos basicamente ? Inserimos atravs do mtodo .append() os inputs com o atributo name concatenado com a quantidade de linhas mais 1, que atribumos varivel quantidade. Sendo assim somente o final da propriedade name ir mudar , facilitando a recepo dos dados por outra pgina. Implementando ento uma insero dinmica onde todos os valores podero ser capturados. Obs:. bom lembra que essa uma das formas de se fazer cada um pode implementar da maneira que quiser mas o conceito , como j mencionei, sempre o mesmo. Ateno para a dica: Aqui no foi associado nenhum evento aos inputs, mas se necessrio, preciso utilizar o mtodo .live() para que este evento se estenda a todos os inputs. Um abrao e at o prximo post!
Upload dinmico com PHP/jQuery 43.025 visualizaes 27 20 http://rafaelcouto.com.br/upload-dinamico-com-php-jquery/
Ol pessoal, tudo certo? Vrias pessoas me perguntam como fazer upload de arquivos com ajax e hoje pretendo apresentar uma soluo para isso. Na verdade, no se trata de um upload com ajax, mas sim um upload dinmico, porm para um usurio comum isso indiferente. A soluo simples e conhecida: fazer um iframe contendo um campo do tipo file, fazemos o envio desse arquivo dentro do iframe e ento com a ajuda do jQuery recuperamos as informaes desse arquivo e trazemos para a pgina pai. Nesse artigo irei utilizar anexo de arquivos como exemplo. Confira o resultado final 1. Upload (upload.php) Inicialmente iremos fazer uma pgina que far o upload de um arquivo, assim como feito normalmente. Caso voc tenha dvidas, pode consultar esses dois artigos: Upload simples de imagem com PHP/MySQL e Upload de vrios arquivos com PHP. <?php // Flag que indica se h erro ou no $erro = null; // Quando enviado o formulrio if (isset($_FILES['arquivo'])) { // Extenses permitidas $extensoes = array(".doc", ".txt", ".pdf", ".docx", ".jpg"); // Caminho onde ficaro os arquivos $caminho = "uploads/"; // Recuperando informaes do arquivo $nome = $_FILES['arquivo']['name']; $temp = $_FILES['arquivo']['tmp_name']; // Verifica se a extenso permitida
if (!in_array(strtolower(strrchr($nome, ".")), $extensoes)) { $erro = 'Extenso invlida'; } // Se no houver erro if (!isset($erro)) { // Gerando um nome aleatrio para o arquivo $nomeAleatorio = md5(uniqid(time())) . strrchr($nome, "."); // Movendo arquivo para servidor if (!move_uploaded_file($temp, $caminho . $nomeAleatorio)) $erro = 'No foi possvel anexar o arquivo'; } } ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Upload dinmico com jQuery/PHP</title> <script type="text/javascript" src="js/jquery.js"></script> </head> <body> <form id="upload" action="upload.php" method="post" enctype="multipart/form-data"> <label>Arquivo: </label> <span id="status" style="display: none;"><img src="image/loader.gif" alt="Enviando..." /></span> <br /> <input type="file" name="arquivo" id="arquivo" /> </form> </body> </html> Bom pessoal, nesse arquivo ser feito apenas um upload simples. Resumindo, quando enviado o formulrio ns recuperamos as informaes desse arquivo, verificamos se sua extenso vlida, caso seja, geramos um nome aleatrio para esse arquivo e enviamos para o servidor. Vamos agora criar nosso cdigo javascript (utilizando jQuery), que ser includo no cabealho desse arquivo:
$(function($) { 1 // Definindo pgina pai 2 var pai = window.parent.document; 3 4 <?php if (isset($erro)): // Se houver algum erro ?> 5 6 // Exibimos o erro 7 alert('<?php echo $erro ?>'); 8 9 <?php elseif (isset($nome)): // Se no houver erro e o arquivo foi enviado ?> 10 11 // Adicionamos um item na lista (ul) que tem ID igual a "anexos" 12 $('ul#anexos', pai).append('<li lang="<?php echo $nomeAleatorio ?>"><?php 13 echo $nome ?> <img src="image/remove.png" alt="Remover" class="remover" 14 onclick="removeAnexo(this)" \/> </li>'); 15 16 <?php endif ?> 17 18 // Quando selecionado um arquivo 19 $("#arquivo").change(function() { 20 // Se o arquivo foi selecionado 21 if (this.value != "") 22 { 23 // Exibimos o loder 24 $("#status").show(); 25 // Enviamos o formulrio 26 $("#upload").submit(); 27 } 28 }); }); Talvez no faa tanto sentido agora, porm mais adiante voc entender melhor, vamos aos detalhes:

Linha 3: Como esse arquivo ficar dentro de um iframe, precisamos saber quem a pgina pai, para isso definimos uma varivel com o documento da pgina pai; Linha 5, 8: Aqui est um detalhe interessante. Como a linguagem servidor (PHP) executada primeiro que a cliente (javascript), ns fazemos um teste. Se a varivel erro foi definida, ns imprimimos um alert, que depois ser executada pelo javascript, que exibir uma mensagem de alerta com o erro que foi armazenado; Linha 10: Caso no haja erro, e a varivel nome foi definida, ou seja, o arquivo foi enviado;
Linha 13: Colocamos na lista (que ser criada adiante) com ID igual a anexos um item, porm perceba que foi passado no segundo parmetro do seletor a varivel pai, portanto ele ir buscar o ul#anexos da pgina pai. Nesse item colocamos o nome aleatrio do arquivo na propriedade LANG. Logo aps, colocamos uma imagem que ser responsvel por remover o anexo, note que definimos, no evento onclick, a chamada da funo removeAnexo(), est ser explicada adiante. Linha 18: Quando o usurio selecionar um arquivo. Linha 20: Verificamos se um arquivo foi realmente selecionado. Linha 23: Exibimos nosso loader (carregando). Linha 25: Enviamos o formulrio via javascript.
2. A pgina pai (index.php) Est ser a pgina principal, onde colocaremos o iframe que incluir o nosso arquivo de upload: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Upload dinmico com jQuery/PHP</title> <script type="text/javascript" src="js/jquery.js"></script> </head> <body> <h1>Upload dinmico com jQuery/PHP</h1> <ul id="anexos"></ul> <iframe src="upload.php" frameborder="0" scrolling="no"></iframe> <form id="upload" action="index.php" method="post"> <input type="submit" name="enviar" value="Enviar" /> </form> </body> </html>
Nessa estrutura, criamos a lista (ul#anexos) onde sero adicionados os anexos, logo abaixo criamos nosso iframe e chamamos nosso arquivo de upload (upload.php). A essa altura, nosso upload dinmico j est funcional, porm precisamos criar a funo para remover o anexo: 1 // Funo para remover um anexo 2 function removeAnexo(obj) 3 { 4 // Recuperando nome do arquivo 5 var arquivo = $(obj).parent('li').attr('lang'); 6 // Removendo arquivo do servidor 7 $.post("index.php", {acao: 'removeAnexo', arquivo: arquivo}, function() { 8 // Removendo elemento da pgina 9 $(obj).parent('li').remove(); 10 }); 11 }

Linha 2: Criamos nossa funo que receber como parmetro o elemento da imagem; Linha 5: A imagem est dentro do item (li), certo? Portanto, atravs do mtodo parent() selecionamos o item (li) e pegamos o valor da propriedade LANG (Lembra que colocamos o nome do arquivo aqui?); Linha 7: Fazemos uma requisio ajax com nosso prprio arquivo, e passamos como ao removeAnexo e tambm o nome do arquivo anexado. Isso ser preciso para que possamos remover o arquivo do servidor; Linha 9: Quando terminado a requisio, removemos o elemento li de nossa pgina.
Vamos ento criar a funo PHP (logo no inicio do arquivo) que remover o arquivo do servidor: <?php // Quando a ao for para remover anexo if ($_POST['acao'] == 'removeAnexo') { // Recuperando nome do arquivo $arquivo = $_POST['arquivo']; // Caminho dos uploads $caminho = 'uploads/'; // Verificando se o arquivo realmente existe if (file_exists($caminho . $arquivo) and !empty($arquivo)) // Removendo arquivo
unlink($caminho . $arquivo); // Finaliza a requisio exit; } ?> Parece que agora acabou n? Ainda no. Como iremos recuperar esses anexos quando enviado o formulrio? J que nosso formulrio est simplesmente assim: <form id="upload" action="index.php" method="post"> <input type="submit" name="enviar" value="Enviar" /> </form> A soluo criar campos ocultos com os nomes dos arquivos quando enviado o formulrio, para isso: $(function($) { 1 // Quando enviado o formulrio 2 $("#upload").submit(function() { 3 // Passando por cada anexo 4 $("#anexos").find("li").each(function() { 5 // Recuperando nome do arquivo 6 var arquivo = $(this).attr('lang'); 7 // Criando campo oculto com o nome do arquivo 8 $("#upload").prepend('<input type="hidden" name="anexos[]" value="' + 9 arquivo + '" \/>'); 10 }); 11 }); 12 });

Linha 3: Quando nosso formulrio for enviado; Linha 5: Procuramos cada item (li) em nossa lista de anexo e passamos por cada um atravs do lao each(); Linha 7: Recuperamos o nome (aleatrio) do arquivo que foi armazenado na propriedade LANG; Linha 9: Atravs do prepend() adicionamos um campo oculto (hidden) dentro de nosso formulrio (#upload) e colocamos o nome do arquivo como valor. Note que atribumos o nome como anexos[] para que assim possamos recuperar os anexos j dentro de um array com PHP.
Agora, para fins de teste voc pode adicionar o seguinte no inicio do arquivo:
// Se enviado o formulrio if (isset($_POST['enviar'])) { echo 'Arquivos enviados: '; echo '<pre>'; // Exibimos os arquivos anexados print_r($_POST['anexos']); echo '</pre>'; } Assim, voc pode perceber, que quando enviado o formulrio, o nome de nossos arquivos ficaram no array anexos e ento podemos armazen-los no banco de dados, por exemplo.
jQuery: Duplicar campos de formulrios (2)
http://www.zatecus.com/blog-jquery-duplicar-campos-de-formularios-2-post.html
Ol pessoal! Muitos leitores gostaram de meu post onde ensinei a duplicar campos de formulrios utilizando o jQuery. Bem, volto novamente a ensinar esta dica atravs do cdigo fonte comentado, porm, com novas funcionalidades! Agora possvel remover linhas da tabela e a definir um limite mximo de linhas! Confira! Comeando com o HTML...
01 <form action="pagina.php" method="post"> 02 <table cellpadding="4" cellspacing="0" border="1"> 03 04 05 06 07 08 09 10 11 12 13 14 15 16 > </tr> </thead> <tbody id="repetir"> <tr id="linha_1"> <td><input type="text" name="dia[]" value="" /></td> <td><input type="text" name="hora[]" value="" /></td> <td><input type="text" name="resultado[]" value="" /></td> <thead > <tr> <td>Dia</td> <td>Hora</td> <td>Resultado</td> <td>Seleo</td> <td> </td
17 18 19 20 21 22 23 24
<td> <select name="selecao[]"> <option></option> <option value="1">Seleo 1</option> <option value="2">Seleo 2</option> <option value="3">Seleo 3</option>
</select> </td> <td><input type="button" value="Remover" id="remove" 25 onclick="$.removeLinha(this);" /></td> 26 </tr> 27 28 29 </tbody> <tfoot> <tr> <td align="right" colspan="5"><input type="button" value="Adicionar" 30 id="add" /><input type="submit" value="Enviar" /></td> 31 </tr> </tfoot 32 > 33 </table> 34 </form>
No cdigo acima, destaco este trecho de exemplo para explicar...
1 <input type="text" name="dia[]" value="" />
Para quem no sabe, estas chaves "[]", presentes dentro do atributo name, servem para fazer o formulrio guardar as informaes de cada linha em uma array, podendo assim serem lidas pelo PHP ou outra linguagem utilizada.
Agora, o cdigo em jQuery que faz tudo acontecer!
01 /* Funo jQuery para remover linha */ 02 03 $.removeLinha = function (element) 04 { 05 06 /* Conta quantidade de linhas na tabela */ 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 var linha_total = $('tbody#repetir tr').length; /* Condio que mantm pelo menos uma linha na tabela */ if (linha_total > 1) { /* Remove os elementos da linha onde est o boto clicado */ $(element).parent().parent().remove(); } /* Avisa usurio de que no pode remover a ltima linha */ else { alert("Desculpe, mas voc no pode remover esta ltima linha!"); }
29 30 }; 31 32 /* Quando o documento estiver carregado */ 33 34 $(document).ready(function()
35 { 36 37 /* Varivel que armazena limite de linhas (zero ilimitada) */ 38 39 var limite_linhas = 5; 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 /* Quando o boto adicionar for clicado... */ $('#add').click(function() { /* Conta quantidade de linhas na tabela */ var linha_total = $('tbody#repetir tr').length; /* Condio que verifica se existe limite de linhas e, se existir, testa se usurio atingiu limite */ if (limite_linhas && limite_linhas > linha_total) { /* Pega uma linha existente */ var linha = $('tbody#repetir tr').html(); /* Conta quantidade de linhas na tabela */ var linha_total = $('tbody#repetir tr').length; /* Pega a ID da linha atual */ var linha_id = $('tbody#repetir tr').attr('id'); /* Acrescenta uma nova linha, incluindo a nova ID da linha */
68 69 70 71 72 73 74 75 76 77 78 79 80 $('tbody#repetir').append('<tr id="linha_' + (linha_total + 1) + '">' + linha + '</tr>'); } /* Se usurio atingiu limite de linhas */ else { alert("Desculpe, mas voc s pode adicionar at " + limite_linhas + " linhas!"); } });
81 82 });
Nota: Incluir o cdigo jQuery acima dentro das tags <script>, claro! Confira uma demonstrao clicando aqui. Abraos a todos e faam bom proveito do cdigo! :)
Validando Formulrios com Javascript

31.172 visualizaes 12 1
Com o PHP ou ASP, podemos validar um formulrio, porm necessrio atualizar a pgina e tudo acaba sendo mais demorado. Com Javascript isso fica mais fcil, pois no necessrio nem atualizar a pgina. Mas lembrando que necessrio tambm a validao com o lado servidor (PHP ou ASP), pois o javascript pode ser burlado. Clique aqui para ver o que ser feito uma validao simples, porm de muita utilizadade. Vamos ao cdigo (O cdigo completo est disponvel para download no final do artigo):
1. Criando o formulrio:
Primeiramente, vamos fazer nosso formulrio:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <html> <head> <title>Validando Formulrios com Javascript</title> </head> <body> <form name="form1" action="enviar.php" method="post"> Nome: <input name="nome" type="text"><br /><br /> Email: <input name="email" type="text"><br /><br /> Senha: <input name="senha" type="password"><br /><br /> Repitir Senha: <input name="rep_senha" type="password"><br /><br /> <input type="submit" onclick="return validar()"> </form> </body> </html>
- Bom aqui criamos o formulrio; - Linha 15: [onclick="return validar()"] estamos chamando a funo validar() no momento que o usurio clicar em enviar;
2. Criando a funo validar()
Agora, vamos criar nosso cdigo javascript para fazer validao, lembrando que esse cdigo deve estar, de preferncia, entre as tags head (cabealho):
1 2 3 4 <script language="javascript" type="text/javascript"> function validar() { } </script>
- No cdigo acima foi criada a funo validar();

1 2 3 4 5 6 7 8 <script language="javascript" type="text/javascript"> function validar() { var nome = form1.nome.value; var email = form1.email.value; var senha = form1.senha.value; var rep_senha = form1.rep_senha.value; } </script>
- Dentro de nossa funo criamos as varaveis para cada campo de nosso formulrio; - Linha 3: criamos a varavel nome e atribuimos o valor do campo nome, ou seja form1.nome.value (Valor do campo nome do nosso formulrio); - O mesmo foi feito nas linhas 4, 5 e 6;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 <script language="javascript" type="text/javascript"> function validar() { var nome = form1.nome.value; var email = form1.email.value; var senha = form1.senha.value; var rep_senha = form1.rep_senha.value; if (nome == "") { alert('Preencha o campo com seu nome'); form1.nome.focus(); return false; } } </script>
- Linha 8: Se nome (O campo nome, pois declamos a varivel) estiver em branco, as aes sero executadas; - Linha 9: Dispara uma mensagem de alerta dizendo que o usurio deve preencher o campo nome; - Linha 10: Da foco no campo nome; - Linha 15: Retorna a resposta false, ou seja, que no deve continuar enviando os dados;
- Resumindo, caso o campo nome esteje em branco ser exibido uma mensagem de alerta dizendo ao usurio que preencha o campo com seu nome; - O mesmo pode e ser feito com os outros campos;
1 2 3 4 5 if (nome.length < 5) { alert('Digite seu nome completo'); form1.nome.focus(); return false; }
- Podemos verificar tambm se um campo tem o nmero de caracteres mnimo/mximo especificado. - Para isso utilizamos length, ou seja, se o numero de caracteres do campo nome for menor que 5 a ao ser executada.
1 2 3 4 5 if (senha != rep_senha) { alert('Senhas diferentes'); form1.senha.focus(); return false; }
- Podemos tambm ver se dois campos coincidem, no caso a senha e sua repetio; - Se senha (campo senha) for diferente de rep_senha (Campo Repitir Senha) as aes sero executadas; - Podemos utilizar todos os mtodos de comparao: Menor que: < Maior que: > Igual a: == Diferente de: !=
Concluso
Isso s um pouco do que o javascript pode fazer, mas j til para validar seus formulrios de uma forma mais rpida e fcil.

Upload de Vários Arquivos Com PHP 5

Transféré par

Informations du document

Description originale:

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Upload de Vários Arquivos Com PHP 5

Transféré par

Droits d'auteur :

Formats disponibles

Upload de vrios arquivos com PHP 22.

Upload dinmico com PHP/jQuery 43.025 visualizaes 27 20 http://rafaelcouto.com.br/upload-dinamico-com-php-jquery/

jQuery: Duplicar campos de formulrios (2)

No cdigo acima, destaco este trecho de exemplo para explicar...

1 <input type="text" name="dia[]" value="" />

Agora, o cdigo em jQuery que faz tudo acontecer!

29 30 }; 31 32 /* Quando o documento estiver carregado */ 33 34 $(document).ready(function()

Validando Formulrios com Javascript

2. Criando a funo validar()

- No cdigo acima foi criada a funo validar();

Vous aimerez peut-être aussi