22/7/2007 0:13
Esteban Zavala
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í :P 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">
<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(" <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
Archivado en: Controles
Comparte este post: