Categoría: Javascript

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

Cambiar una imagen al dar clic en una imagen en miniatura con #jquery, #galería

Para crear una mini galería básica como la siguiente (den clic en las miniaturas):

Lo podemos hacer de la siguiente forma:

HTML

<div id="thumbs">
   <img style="width: 50px;" alt="" src="../img/images/at.jpg" data-img="../img/images/a.jpg" />
   <img style="width: 50px;" alt="" src="../img/images/bt.jpg" data-img="../img/images/b.jpg" />
</div>

<div>
    <img id="imagenGrande" style="width: 500px;" alt="" src="../img/images/a.jpg" />
</div>

Jquery

$(document).ready(function(){

	//selector de imagenes a aplicar la funcionalidad de click
	$("#thumbs img").click(function(){

		//obtenemos la imagen a mostrar
		urlImagenGrande=$(this).data("img");

		//asignamos la imagen por medio de prop
		$("#imagenGrande").prop("src",urlImagenGrande);

	})

});

Utilizando la propiedad prop procedemos a cambiar el atributo src de img al momento que se da clic en la miniatura. De esta manera queda la funcionalidad dinámica gracias al selector de jquery ($(“#thumbs img”)).

Pasar una función como parámetro en #javascript

Para los que aprendimos un lenguaje Orientado a Objetos antes que javascript algunas veces desconocemos la naturaleza dinámica de este lenguaje, y una de las cosas naturales es poder guardar una función en  una variable e igual enviarse esa función como parámetro.

Existen dos formas de hacerlo y la primera es haciendo una función anónima:


//creamos una función que recorre una lista
function recorreLista(funcionPasadaXParametro){

	//recorremos el arreglo/lista
	//utilizamos la palabra reservada this para referirnos al objeto que es dueño de este metodo.
	for(i=0;i<this.length;i++){

		//ejecutamos la función pasada como parametro, la cual se le envia el elemento actual
		funcionPasadaXParametro(this[i]);
	}

}

//creamos arreglo
arreglo=new Array(1,3,4,5);
//asignamos la funcion al metodo recorre
arreglo.recorre=recorreLista;

//ejecutamos la función pasandole una función anonima
arreglo.recorre(
				//FORMA 1 para pasar una función como paramétro
				//creamos la función anonima
				function(elemento){

					//mostramos el elemento actual
					alert(elemento)
				}
);

La segunda forma de pasar una función como parámetro, es pasando una función existente.


//creamos una función la cual enviaremos
function multiplicaX10(elemento){
	alert(elemento*10);
}

//FORMA 2 para pasar una función como parametro
arreglo.recorre(multiplicaX10);

Nota: Recuerden no poner los paréntesis cuando se pasa una función ya existente como parámetro, el hecho de poner los paréntesis ejecuta la función.