Etiqueta: submit

¿Cómo enviar un archivo por Ajax de #jquery?

Para enviar un archivo por medio de Ajax en realidad es muy fácil, sobre todo con la función Ajax de jquery, para ello lo demuestro a continuación:
Primero tenemos el código html siguiente, el cual tiene un formulario con un campo de texto y un input file, es importante que el atributo del form enctype sea multipart/form-data, si no es asi no se enviara el archivo.


<form id="frmFormulario" enctype="multipart/form-data">
    <input type="text" name="uncampo">
    <input type="file" name="archivo">
    <input type="submit" value="Enviar">
</form>

Ahora tenemos que seleccionar(selectores de jquery) el formulario para que haga el envió por Ajax (Ver: ¿Cómo hacer una petición Ajax por medio de submit?) y para ello utilizo el siguiente código en javascript el cual esta comentado a detalle:


  $(document).ready(function () {

        //sobreescribimos el metodo submit para que envie la solicitud por ajax
        $("#frmFormulario").submit(function (e) {

            //esto evita que se haga la petición común, es decir evita que se refresque la pagina
            e.preventDefault();

            //ruta la cual recibira nuestro archivo
            url="@Url.Content("~/Archivo/Recibe")"

            //FormData es necesario para el envio de archivo,
            //y de la siguiente manera capturamos todos los elementos del formulario
            var parametros=new FormData($(this)[0])

            //realizamos la petición ajax con la función de jquery
            $.ajax({
                type: "POST",
                url: url,
                data: parametros,
                contentType: false, //importante enviar este parametro en false
                processData: false, //importante enviar este parametro en false
                success: function (data) {

                   alert("Se capturo el archivo con éxito")
                },
                error: function (r) {

                    alert("Error del servidor");
                }
            });

        })

    })

Y este es el trabajo que se hace en el front-end, ahora solo queda hacer el método en el back-end el cual capture el archivo y lo guarde o realice la acción deseada con el fichero; por ejemplo en Mvc.Net seria de la siguiente manera:

//controlador de mvc.net
public class Archivo : Controller{
  public ActionResult Recibe(string uncampo, HttpPostedFileBase archivo)
        {

          //aqui va el codigo que deseemos para manipular el archivo

       }
}

Y así de fácil se envía un archivo por medio de Ajax. Dudas o comentarios pueden hacérmelos llegar y yo les respondo en breve.

¿Cómo hacer una petición ajax por medio de submit? #jquery #ejemplos

Algunas veces nuestras peticiones de formulario son pesadas (cargar archivos por ejemplo) y esto puede ocasionar que el usuario se estrese o siga presionando botones, para ello yo en estos casos recurro a realizar una petición ajax remplazando el submit del form (a la vez bloqueo la pantalla para que no estén haciendo peticiones a lo bestia, pueden utilizar algo como esto: [bloquear la pantalla con un div]).
Para ello podemos ayudarnos de la función serialize() de jquery, con la cual nos regresa la cadena de parámetros que están en nuestro form (valor1=1&valor2=2&valor3=3…).
Tenemos que tener cuidado en poner el return false al final, ya que con eso evitamos que se continúe con el submit común.
El siguiente ejemplo muestra fácilmente como podemos realizar esa petición (leer los comentarios):

Código HTML

    <form id="miForm" action="/peticion.php">
    	<input name="cajaTexto" type="value" value="pato" />
        <input type="submit" value="Enviar" />
    </form>

Código Jquery

//selector sobre el form seguido de la función submit
$("#miForm").submit(function(){
		//de esta manera remplazamos

		//ahora obtendremos los atributos que necesitaremos
		url=$(this).prop("action")
		//la función serialize nos regresa los input, es importante ponerles name
		parametros=$(this).serialize()

		//aqui utilizamos la petición, en este caso post
		$.post(url,parametros,function(data){
			//aqui es cuando ya se hizo nuestra petición
			//regularmente yo regreso 1 para mostrar exito
				if(data=="1"){
					alert("exito")
				}else{
					//si no regreso el 1, regreso el error y asi lo muestro
					alert(data)
				}
		})

		//ESTO ES MUY IMPORTANTE, YA QUE SI NO SE PONE SE REALIZA LAS DOS PETICIONES
		//TANTO AJAX COMO LA PETICIÓN NORMAL DE FORMULARIO
		//REFRESCANDO TODA LA PAGINA.
		return false;

})

De esta manera podremos remplazar la petición submit normal, y hacer una petición ajax, que es mas formal y elegante.

Nota: el archivo peticion.php del action del form, es un proceso x en el cual se realiza una operación ya sea inserción, validación, etc. Y nos regresa en caso de éxito un “1”, sino el error.