Subir archivos estilo Gmail con JQuery y AJAX en ASP.NET 2008

He visto siempre esta duda en muchos foros de asp.net como subir muchos archivos con estilo AJAX y ProgressBar similar al servicio Gmail de Google.
Y la respuesta es el plugin Uploadify para JQuery el cual hace lo mismo en simples pasos. Aqui explicare como hacerlo.
Paso 1
Descargar los plugins Uploadify de JQuery y la libreria JQuery de los links de abajo.
Download JQuery
Download Uploadify
Una vez que hayan descargado necesitaran ubicar estos 4 archivos:

1. jquery-1.3.2.min.js
2. jquery.uploadify.js
3. uploader.fla
4. 
   
5. uploader.swf

ponganlos en una carpeta llamada scripts en la misma ruta de su aplicacion web asp.net.

Paso 2 Abran Visual Studio, creen un proyecto web y añadan los archivos que descargaron debajo de la etiqueta de su codigo html

<link rel="Stylesheet" type="text/css" href="CSS/uploadify.css" />
     <script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.uploadify.js"></script>

Agregamos un control tipo FileUpload al proyecto:

Agreguen el siguiente script al final del codigo html

<script type = "text/javascript">
$(window).load(
    function() {
    $("#<%=FileUpload1.ClientID %>").fileUpload({
        'uploader': 'scripts/uploader.swf',
        'cancelImg': 'images/cancel.png',
        'buttonText': 'Browse Files',
        'script': 'Upload.ashx',
        'folder': 'uploads',
        'fileDesc': 'Image Files',
        'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
        'multi': true,
        'auto': true
    });
   }
);
</script> 

Como puedes ver necesitamos especificar algunas configuraciones junto con el control FileUpload. La completa lista de configuraciones y sus descripciones estan disponibles aqui. Algo importante que tenemos que hacer es apuntar es 'script': 'Upload.ashx' el cual manejara el FileUpload y guardara los archivos subidos al disco duro. Abajo esta el codigo para el archivo Upload.ashx

<%@ WebHandler Language="C#" Class="Upload" %>

using System;
using System.Web;
using System.IO;

public class Upload : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        context.Response.Expires = -1;
        try
        {
            HttpPostedFile postedFile = context.Request.Files["Filedata"];
            
            string savepath = "";
            string tempPath = "";
            tempPath = System.Configuration.ConfigurationManager.AppSettings["FolderPath"]; 
            savepath = context.Server.MapPath(tempPath);
            string filename = postedFile.FileName;
            if (!Directory.Exists(savepath))
                Directory.CreateDirectory(savepath);

            postedFile.SaveAs(savepath + @"\" + filename);
            context.Response.Write(tempPath + "/" + filename);
            context.Response.StatusCode = 200;
        }
        catch (Exception ex)
        {
            context.Response.Write("Error: " + ex.Message);
        }
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }
}

Como veran ese manejador simplemente acepta los archivos subidos y guarda el archivo en la carpeta llamada uploads la cual crearemos dentro de la ruta raiz de nuestro directorio web. El web.config modificaremos la parte del appsettings como esta abajo:

<appSettings>
    <add key ="FolderPath" value ="uploads"/>
</appSettings >

Y listo al presionar F5 les saldra asi:

Como ven en la figura estos archivos se suben automaticamente una vez que los seleccionamos si no queremos de esta forma cambiamos la configuracion auto a false. Pero en ese caso tendran que crear un trigger de subir archivos para interactuar con el usuario por medio de un boton. Primero cambiamos la opcion a false aqui:

<script type = "text/javascript">
$(window).load(
    function() {
    $("#<%=FileUpload1.ClientID %>").fileUpload({
        'uploader': 'scripts/uploader.swf',
        'cancelImg': 'images/cancel.png',
        'buttonText': 'Browse Files',
        'script': 'Upload.ashx',
        'folder': 'uploads',
        'fileDesc': 'Image Files',
        'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
        'multi': true,
        'auto': false
    });
   }
);
</script> 

luego agregamos este codigo debajo de la etiqueta form que desencadenara la subida de archivos:

<a href="javascript:$('#<%=FileUpload1.ClientID%>').fileUploadStart()">Start Upload</a>  

Si el usuario no da click en el boton los archivos estarn en lista pendientes a ser subidos. Con este codigo se limpiara la lista una vez subidos los archivos:

 <a href="javascript:$('#<%=FileUpload1.ClientID%>').fileUploadClearQueue()">Clear</a> 

aqui pueden descargar el codigo de la aplicacion espero les sea util =) MultipleFilesUpload.zip (57.08 kb)