Scribd
Cargar
159 vistas5 páginas

Trucos Utiles Jquery

El documento explica cómo enviar formularios sin recargar la página usando jQuery y AJAX. Se intercepta el evento submit del formulario y se envían los datos mediante una petición AJAX, mostrando la respuesta en la página sin necesidad de recargar. También muestra cómo validar los formularios AJAX con jQuery Validate y cómo subir múltiples archivos mediante un plugin de jQuery.

Cargado por

ravalos7
Derechos de autor
© Attribution Non-Commercial (BY-NC)
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
159 vistas5 páginas

Trucos Utiles Jquery

El documento explica cómo enviar formularios sin recargar la página usando jQuery y AJAX. Se intercepta el evento submit del formulario y se envían los datos mediante una petición AJAX, mostrando la respuesta en la página sin necesidad de recargar. También muestra cómo validar los formularios AJAX con jQuery Validate y cómo subir múltiples archivos mediante un plugin de jQuery.

Cargado por

ravalos7
Derechos de autor
© Attribution Non-Commercial (BY-NC)
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 5

Ajax enviar formularios sin recargar jquery http://www.miguelmanchego.

com/2009/ajax-enviar-formularios-sin-recargar-jquery/ Ahora viene la parte novedosa del script voy a hacer que jquery intercepte el evento submit y envie el formulario sin recargar la pgina. <script language="javascript" src="jquery-1.3.min.js"></script> <script language="javascript"> $(document).ready(function() { // Esta primera parte crea un loader no es necesaria $().ajaxStart(function() { $('#loading').show(); $('#result').hide(); }).ajaxStop(function() { $('#loading').hide(); $('#result').fadeIn('slow'); }); // Interceptamos el evento submit $('#form, #fat, #fo3').submit(function() { // Enviamos el formulario usando AJAX $.ajax({ type: 'POST', url: $(this).attr('action'), data: $(this).serialize(), // Mostramos un mensaje con la respuesta de PHP success: function(data) { $('#result').html(data); } }) return false; }); }) </script>

Validar formularios ajax jquery


Solo debemos fijarnos bien en el id del formulario y para los campos que deseamos validar agregar una clase required, email, etc <form name="comentariosFrm" id="comentariosFrm" method="post" action=""> <ol> <li> <label>Nombre: (requerido al menos dos caracteres)</label> <input id="cname" name="name" class="required" minlength="2" /> </li> <li> <label>E-mail: (requerido)</label> <input id="cemail" name="email" class="required email" minlength="2" /> </li>

Primero debemos incluir la libreria jquery, el validador y con una sola linea de texto le decimos que formulario validar

<script src="js/jquery-1.3.1.min.js" type="text/javascript"></script> <script src="js/jquery.validate.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $("#comentariosFrm").validate(); }); </script>

Puedes ver ms ejemplos y descargar el script en la pgina de Bassistance

Subir Multiples Archivos Ajax jquery


http://www.miguelmanchego.com/2009/subir-multiples-archivos-ajax-jquery/ <form action="upload.php" id="frm_uploader" name="frm_uploader" method="post" enctype="multipart/form-data"> <ol> <li><label>Name:</label><input type="text" id="cfname" name="fname" size="30" class="required" /></li> <li><label>E-mail:</label><input type="text" id="cfemail" name="femail" size="30" class="required email" /></li> <li><label>Select Files</label><input name="ffoto[]" type="file" class="multi" accept="gif|jpg| jpeg|png|pdf|zip|rar|ai|eps|mp3|avi|wmv|mpg|mpeg|cdr" /></li> <li><p align="center"><input type="submit" name="submit" value="Upload Now" class="btn" /></p></li> </ol> </fieldset> </form>

Incluimos las librerias javascript, el script automaticamente buscar el campo con la clase multi

<script language="javascript" src="js/jquery-1.31.js"></script> 1 <script language="javascript" 2src="js/jquery.MultiFile.pack.js"></script>

PHP para recibir los a rchivos

Este script permite subir multiples archivos como un array, asi que empezemos por ah

<?php $cuales=""; /// Vemos cuantos archivos hemos subido $nro=count($_FILES["ffoto"]["name"]); /// Empezamos el array for ($i=1; $i<$nro; $i++) { $file_name=$_FILES["ffoto"]["name"][$i]; $file_size=$_FILES["ffoto"]["size"][$i]; $file_type=$_FILES["ffoto"]["type"][$i]; if($file_name!=""){ // verifica carpeta $nombre_archivo=$_POST['femail'];

if (!file_exists('userfiles'.$nombre_archivo)) { mkdir('userfiles/'.$nombre_archivo,0777); } $path="userfiles/".$nombre_archivo; // sube archivo copy($_FILES["ffoto"]['tmp_name'][$i], $path.'/'.$file_name) ; echo '<p align="center">Your file <b>'.$file_name.'</b> was successfully uploaded</p>'; $cuales.=$file_name." "; } else { echo '<br><br><p align="center"><b>Error with '.$file_name.'</b></p>'; }

Puedes decargar este plugin jquery y ver mas ejemplos desde la pagina de su creador

jQuery Multiple File Upload Plugin


http://www.fyneworks.com/jquery/multiple-file-upload/#tab-Overview

The Multiple File Upload Plugin (jQuery.MultiFile) is a non-obstrusive plugin for the jQuery Javascript library that helps users easily select multiple files for upload quickly and easily whilst also providing some basic validation functionality to help developers idenfity simple errors, without having to submit the form (ie.: upload files).

http://jquery-multifile-plugin.googlecode.com/svn/trunk/multiple-file-upload.zip

También podría gustarte