ASP.NET MVC: Subir archivos de forma asíncrona con jQuery.Form plugin

Ya llevo algo de tiempo metiéndome en lo que son las aplicaciones web asíncronas. Resulta conveniente porque, por un lado, permite al usuario hacer distintas actividades al mismo tiempo, y por otro, reduce la cantidad de datos enviados a través de la red, ya que no se tiene que cargar la página completa cada vez que se reciba un resultado desde el servidor.

Trabajando con herramientas como jQuery, es muy fácil hacer operaciones asíncronas (con la función ajax) para casi todos los casos. En este artículo hablo de un caso muy particular que, aunque con jQuery no es nada sencillo, con un complemento para éste se vuelve de lo más fácil: cargar archivos de manera asíncrona.

Volviendo a los formularios básicos de HTML

Cuando empezamos a trabajar con ajax desde jQuery, todo se vuelve tan sencillo que olvidamos los principios básicos de las aplicaciones web, como lo es el uso del elemento <form>. La función de este elemento es permitirle al usuario dar entrada a datos, los cuales se envían al servidor y serán procesados ahí como deban serlo. La ventaja de jQuery es que no necesitamos usar un formulario para hacer esto, y es precisamente por eso que dejamos de utilizarlos.

Pero al enviar archivos no podemos darnos ese lujo. Cuando usamos un elemento <input type="file"/> no podemos tomar su “valor” y pasarlo como parámetro por la función ajax. Es la función submit del formulario la que hace que el navegador suba el contenido del archivo a internet y se envíe al servidor. Javascript no puede hacer eso.

jQuery form plugin

El plugin jQuery Form se puede utilizar para realizar “submits asíncronos”. Es decir, hacer que el botón submit de un formulario se ejecute de forma asíncrona. Entre las ventajas de usar este plugin está el poder ejecutar código antes, durante y después de la operación, con lo cual podemos hacer validaciones, mostrar el progreso de la operación y mostrar el resultado, todo desde el lado del cliente. Es muy similar a la función ajax de jQuery, pero podemos dejar algunas configuraciones directamente en el formulario.

En el código agregué toda la documentación para tratar algunos detalles que se pueden presentar. Uno muy particular es para resolver un problema con Internet Explorer (¡qué raro!) en versiones inferiores a la 10. Recomiendo leer todos los comentarios en el código para entender el funcionamiento del mismo y ajustarlo a sus propias necesidades.

Actualización (2017/11/06)

Como ya he mencionado en otros posts, estoy subiendo nuevamente los códigos de ejemplo, esta vez en GitHub, ya que me era difícil mantener los medios de almacenamiento anteriores.

Debido a esto, incluso perdí algunos ejemplos, como el de este artículo. Tuve que volver a hacerlo desde cero. Obviamente no es igual que el original, pero para bien, ahora tengo más experiencia y conocimientos de los que seguramente tenía cuando hice el anterior, por lo que el código debería ser más limpio y comprensible. A fin de cuentas, el archivo Index.cshtml tiene el ejemplo de jQuery Form. Lo demás es adorno.

https://github.com/israel-munoz/dotnet-aspnet-asyncupload

Anuncios

Autor: Israel Muñoz

Soy desarrollador de software, principalmente dedicado a desarrollo de aplicaciones web. Especializado en .NET full-stack, además de tecnologías front-end HTML, CSS y JavaScript. A ratos, profesor de materias de informática. Me gusta mucho todo lo que tiene que ver con las tecnologías nuevas para desarrollo web, y el diseño de sitios y aplicaciones.

5 comentarios en “ASP.NET MVC: Subir archivos de forma asíncrona con jQuery.Form plugin”

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

w

Conectando a %s