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(« <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»>

<title>Geeks Bar</title>

</head>

<body>

<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(« <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»>

<title>Geeks Bar</title>

</head>

<body>

<div>

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

</div>

</form>

</body>

</html>

Espero que le sea de utilidad

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

Pudes ingresar ese mismo codigo en visual basic , si puedes te lo agradeceria un millon.

Gracias

Responder

Ivan, ahi publique el codigo en Visual Basic, Saludos

Responder

hola me gustaria saber como cambiarle el nombre al archivo por un codigo que yo tengo

Responder

hola me gustaria saber como cambiarle el nombre al archivo por un codigo que yo tengo gracias

Responder

hola xavier, explicame mejor que quieres hacer.

Saludos

Responder

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

Responder

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()

Responder

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

Responder

Saludos Sergio!!!

Gracias por tu aclaracion, es bueno destacar que eso lo hice cambiandolo de pronto con notepad ++, muy buena tu aportacion

Responder

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

Responder

Oye que buen articulo, me ha sido muy util.. gracias

Responder

hola amigo esta interesante tu articulo, me podrias mandar el codigo a mi correo jonasjimenez@tabasco.gob.mx

de antemano gracias

Responder

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

Responder

Hola amigo, interesante el FileUpload, pero me gustaria saber como hago para guardar el archivo en un servidor remoto.

Responder

Hola disculpa como le hago para que el progres bar salga en la misma pagina en donde se ve al fileupload

Responder

esta muy bueno el ejemplo … buenaaaa

Responder

Una pregunta, el objeto Thread en donde lo declaraste?

Gracias.

Responder

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.

Responder

yo tambien necesitaria info de como hacer para ponerlo en un servidor remoto, y estaria barbaro q tenga una clase para achicar la imagen. gracias

Responder

Si me funciona pero cuando quiero subir un Archivo pesado no me lo muestra
A que se debe

Responder

No me aparece por nada del mundo la progress bar(el

)

Responder

Como mandas a llamar tu user control dentro del boton de cargar o como seria te lo agradeceria mucho si me pudieras ayudar

Responder

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

Responder

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

jjimenezcf@gmail.com

Responder

muy buena aportacion amigo, gracias por compartir.

Responder

amigo ya probandolo esta muy bien en explorer pero en firefox parece que no funciona no se ve el progreso de carga

Responder

Hola, por más que intento probarlo no compila, da errores no podrían subir una proyecto ya compilado??? gracias

Responder

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… 🙁

Responder

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

Responder

Bueeeeeeeeeeenisimo el articulo!! Felicidades!! me ayudo en serio!! =d

Responder

Bueeeeeeeeeeenisimo el articulo!! Felicidades!! me ayudo en serio!! =d

Responder

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

Responder a anonymous Cancelar respuesta