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.
Deployando .NET 
mmm el proyecto de ejemplo es un Windows form 😦
Ups… Archivo incorrecto. Gracias. Más tarde subo el correcto. Disculpa.
Listo. Ya corregí el archivo.
Por favor lo puede subir el ejemplo nuevamente. Gracias
Ejemplo subido a GitHub