¿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.

mm

About

Desarrollador de software, lector compulsivo.

View all posts by

4 thoughts on “¿Cómo enviar un archivo por Ajax de #jquery?

  1. Buen dia.

    Si tengo varios inputs en el formulario pero no quiero enviar todos, como podria enviar solo los que necesito?

    Me explico tengo varios datos de “Informacion de Usuario” y 2 input file, entonces la mitad de los campos del formulario no se envian, quisiera enviar solo los que si me van a servir, como podria hacer esto?

    1. Podrias meter los inputs correspondientes dentro de un form en especifico o puedes utilizar un boton en lugar de un submit y en el evento onclick pones una funcion javascript la cual al darle click recolectaras la informacion de los inputs correspondientes:

      parametros=”valor1=”+$(“#miinput1”).val();
      parametros+=”&valor2=”+$(“#miinput2”).val(); //etc

      y continuas con la petición ajax..

    2. Podrias meter los inputs correspondientes dentro de un form en especifico o puedes utilizar un boton en lugar de un submit y en el evento onclick pones una funcion javascript la cual al darle click recolectaras la informacion de los inputs correspondientes:

      parametros=”valor1=”+$(“#miinput1”).val();
      parametros+=”&valor2=”+$(“#miinput2”).val(); //etc

      y continuas con la petición ajax..

  2. Buen dia.

    Si tengo varios inputs en el formulario pero no quiero enviar todos, como podria enviar solo los que necesito?

    Me explico tengo varios datos de “Informacion de Usuario” y 2 input file, entonces la mitad de los campos del formulario no se envian, quisiera enviar solo los que si me van a servir, como podria hacer esto?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *