Fileupload con progress bar en Asp.Net 2.0

Primero quería pedir mis disculpas porque tenía tantas ganas de postear, pero he estado requeté ocupado
proyectos en la oficina, algunos pendientes por afuera pa el “picoteo” como decimos aquí 😛 y sobre todo estudiando para certificarme
por cierto ya soy MCTS Windows y Web el examen que tome fue el 70-526.

Manos a la obra…

Hace tiempo, un cliente nos pidió un FileUpload, pues que fácil no!!! Pero uno de los requerimientos del mismo era que
tenía que incluir un progress Bar, pues yo rompiéndome la cabeza y sin saber qué hacer, encontré una solución.

Consiste en un simple UserControl con un FIleUpload y un botón, con el siguiente código de declaración:

<%@ Control Language=”C#” AutoEventWireup=”true” CodeFile=”Uploader.ascx.cs” Inherits=”Uploader” %>

<asp:FileUpload ID=”upUserCtrl” runat=”server” />

<asp:Button ID=”btnUpload” runat=”server” OnClick=”btnUpload_Click” Text=”Upload” />

En el CodeBehind, tenemos dos funciones javascripts, una para imprimir el progress bar y otra por supuesto para eliminar cuando el archivo ya se haya guardado
en nuestra carpeta o BD, como la quieran guardar.

Aquí les dejo el código completo:

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using System.Text;

using System.Threading;

public partial class Uploader : System.Web.UI.UserControl

{

//

public string strLocation = “c:\Geeks\progressBar”;

protected void Page_Load(object sender, EventArgs e)

{

}

//Codigo JavaScript para Imprimir el Progres

public static void Imprimir()

{

StringBuilder sb = new StringBuilder();

sb.Append(“<div id=’updiv’ style=’Font-weight:bold;font-size:11pt;Left:320px;COLOR:black;font-family:verdana;Position:absolute;Top:140px;Text-Align:center;’>”);

sb.Append(“&nbsp;<script> var up_div=document.getElementById(‘updiv’);up_div.innerText=”;</script>”);

sb.Append(“<script language=javascript>”);

sb.Append(“var dts=0; var dtmax=10;”);

sb.Append(“function ShowWait(){var output;output=’Espere mientras se carga el archivo!’;dts++;if(dts>=dtmax)dts=1;”);

sb.Append(“for(var x=0;x < dts; x++){output+=’’;}up_div.innerText=output;up_div.style.color=’red’;}”);

sb.Append(“function StartShowWait(){up_div.style.visibility=’visible’;ShowWait();window.setInterval(‘ShowWait()’,100);}”);

sb.Append(“StartShowWait();</script>”);

HttpContext.Current.Response.Write(sb.ToString());

HttpContext.Current.Response.Flush();

}

//Codigo javascript para borrar el progressbar

public static void Clear()

{

StringBuilder sbc = new StringBuilder();

sbc.Append(“<script language=’javascript’>”);

sbc.Append(“alert(‘Se ha completado correctamente!’);”);

sbc.Append(“up_div.style.visibility=’hidden’;”);

sbc.Append(“history.go(-1)”);

sbc.Append(“</script>”);

HttpContext.Current.Response.Write(sbc);

}

protected void btnUpload_Click(object sender, EventArgs e)

{

string strFileName = System.IO.Path.GetFileName(upUserCtrl.PostedFile.FileName);

try

{

if (strFileName != “”)

{

//Imprimir el ProgressBar

Imprimir();

upUserCtrl.PostedFile.SaveAs(strLocation + strFileName);

Thread.Sleep(2000);

Clear();

}

}

catch(Exception ex)

{

Response.Write(ex.Message);

}

}

}

Bueno y logicamente llamamos nuestro userControl desde una pagina .aspx, en este caso llamemosla Default.aspx

<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”Default.aspx.cs” Inherits=”_Default” %>

<%@ Register Src=”Uploader.ascx” TagName=”Uploader” TagPrefix=”uc1″ %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml” >

<head id=”Head1″ runat=”server”>

<title>Geeks Bar</title>

</head>

<body>

<form id=”form1″ runat=”server”>

<div>

<uc1:Uploader ID=”Uploader1″ runat=”server” />

</div>

</form>

</body>

</html>

Espero le sea de utilidad.

Update:

Por peticion, un lector nos pidio que hicieramos el codigo en VB.

Aqui esta el codigo 

 

<%@ Control Language=”VB” AutoEventWireup=”true” CodeFile=”Uploader.ascx.vb” Inherits=”Uploader” %>

<asp:FileUpload ID=”upUserCtrl” runat=”server” />

<asp:Button ID=”btnUpload” runat=”server” OnClick=”btnUpload_Click” Text=”Upload” /> 

 

Imports System


Imports System.Data


Imports System.Configuration


Imports System.Collections


Imports System.Web


Imports System.Web.Security


Imports System.Web.UI


Imports System.Web.UI.WebControls


Imports System.Web.UI.WebControls.WebParts


Imports System.Web.UI.HtmlControls


Imports System.Text


Imports System.Threading

Partial Public Class Uploader

Inherits System.Web.UI.UserControl

Public strlocation As String = “C:\Geeks\progressbar”

 

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

End Sub


‘Codigo Javascript para Imprimir el Progress

Public Sub Imprimir()

Dim sb As New StringBuilder()

sb.Append(“<div id=’updiv’ style=’Font-weight:bold;font-size:11pt;Left:320px;COLOR:black;font-family:verdana;Position:absolute;Top:140px;Text-Align:center;’>”)

sb.Append(“&nbsp;<script> var up_div=document.getElementById(‘updiv’);up_div.innerText=”;</script>”)

sb.Append(“<script language=javascript>”)

sb.Append(“var dts=0; var dtmax=10;”)

sb.Append(“function ShowWait(){var output;output=’Espere mientras se carga el archivo!’;dts++;if(dts>=dtmax)dts=1;”)

sb.Append(“for(var x=0;x < dts; x++){output+=’’;}up_div.innerText=output;up_div.style.color=’red’;}”)

sb.Append(“function StartShowWait(){up_div.style.visibility=’visible’;ShowWait();window.setInterval(‘ShowWait()’,100);}”)sb.Append(“StartShowWait();</script>”)

HttpContext.Current.Response.Write(sb.ToString())

HttpContext.Current.Response.Flush()

End Sub


‘Codigo javascript para borrar el progressbar

Public Sub Clear()

Dim sbc As New StringBuilder()

sbc.Append(“<script language=’javascript’>”)

sbc.Append(“alert(‘Se ha completado correctamente!’);”)

sbc.Append(“up_div.style.visibility=’hidden’;”)

sbc.Append(“history.go(-1)”)

sbc.Append(“</script>”)

HttpContext.Current.Response.Write(sbc)

End Sub

Protected Sub btnUpload_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnUpload.Click

Dim strFileName As String = System.IO.Path.GetFileName(upUserCtrl.PostedFile.FileName)

Try


If strFileName <> “” Then


‘Imprimir el ProgressBar


Imprimir()

upUserCtrl.PostedFile.SaveAs(strLocation + strFileName)

Thread.Sleep(2000)

Clear()

End If

Catch ex As Exception

Response.Write(ex.Message)

End Try

End Sub

end Class

 

<%@ Page Language=”VB” AutoEventWireup=”true” CodeFile=”Default.aspx.VB” Inherits=”_Default” %>

<%@ Register Src=”Uploader.ascx” TagName=”Uploader” TagPrefix=”uc1″ %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml” >

<head id=”Head1″ runat=”server”>

<title>Geeks Bar</title>

</head>

<body>

<form id=”form1″ runat=”server”>

<div>

<uc1:Uploader ID=”Uploader1″ runat=”server” />

</div>

</form>

</body>

</html>

 Espero que le sea de utilidad

 

31 comentarios en “Fileupload con progress bar en Asp.Net 2.0”

  1. Muy bueno el ejemplo me fue de mucha utilidad. Aprovecho de paso, para hacerte una consulta: sabes si es posible obtener determinados datos del archivo del cual estas haciendo upload? Necesitaria saber cual fue la fecha de ultima modificación del mismo.
    Saludos,

    Julio

  2. Hola me ha servido bastante este codigo!! agradezco a tu persona que se tomo la molestia de publicar dicho codigo felicidades… ha solo para mencionar que el codigo vb despues de

    Thread.Sleep(2000)
    ‘hay que agregarle el
    Clear()

  3. Barbaro pero donde dice:

    Protected Sub btnUpload_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click

    deberia decir:

    Protected Sub btnUpload_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnUpload.Click
    Saludos

  4. Hola, estoy tratando de usar tu codigo pero la pagina donde la estoy metiendo el ascx, esta en una master, ¿Crees qué eso le este afectando? por q no me muestra el progress bar

  5. gracias d antemano… cuando hace el go.history(-1) no me pinta la imagen agregada en un objeto image asociado q he creado… debo hacer un postback o refresh y ya esta…. como lo puedo solucionar…
    saludos

  6. Hola. Muy bueno el ejemplo. Sin embargo, lo estoy probando (la versión VB) y cuando lo ejecuto sólo me pasa por el btnUpload_click si no hay ninguna ruta almacenada en el fileUpload. Si hay una ruta válida, no sólo no pasa, si no que me redirige a una página de error (Internet Explorer no puede mostrar la página web). Si sabeis como evitar esto, o teneis el codigo funcionando, os agradecería que me ayudáseis.

  7. Hola, El problema que yo tengo no es la presentación de una barra de progreso, mi problemas es que quiero cargar mas de un fichero, he creado una tabla y sobre esa tabla he colocado n FileUpload, cuando se hace un Posback se pieden los valores que hay, y no se como se guardan en la viewState.

    Si lo sabes te agracedería que me lo dijeses.

    jjimenezcf@gmail.com

  8. Hola, El problema que yo tengo no es la presentación de una barra de progreso, mi problemas es que quiero cargar mas de un fichero, he creado una tabla y sobre esa tabla he colocado n FileUpload, cuando se hace un Posback se pieden los valores que hay, y no se como se guardan en la viewState.

    Si lo sabes te agracedería que me lo dijeses.

    jjimenezcf@gmail.com

  9. Muy bien… pero una duda… no estástomando en cuenta el tamaño del archivo o lo que falta del mismo vdd? o sea no estás haciendo una comparación del tamaño del archivo, los bytes que se han cargado y los bytes que faltan… esto sólo estaría “simulando” el progreso mediante los setInterval de JS… 🙁

  10. Muchas graias por el tutorial
    una pregunta de principiante
    podrias dar el orden de los archivos
    o si podrias suvier todo el ejemplo en un archivo comprimido

    lo que hice fue
    en este archivo puse todos los imports y codijo vb
    Uploader.ascx.vb
    pero en el siguiente no se que codigo se pone
    Default.aspx.VB

    de antemano muchas gracias

Deja un comentario

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