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»>
<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
Pudes ingresar ese mismo codigo en visual basic , si puedes te lo agradeceria un millon.
Gracias
Ivan, ahi publique el codigo en Visual Basic, Saludos
hola me gustaria saber como cambiarle el nombre al archivo por un codigo que yo tengo
hola me gustaria saber como cambiarle el nombre al archivo por un codigo que yo tengo gracias
hola xavier, explicame mejor que quieres hacer.
Saludos
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
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()
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
Saludos Sergio!!!
Gracias por tu aclaracion, es bueno destacar que eso lo hice cambiandolo de pronto con notepad ++, muy buena tu aportacion
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
Oye que buen articulo, me ha sido muy util.. gracias
hola amigo esta interesante tu articulo, me podrias mandar el codigo a mi correo jonasjimenez@tabasco.gob.mx
de antemano gracias
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
Hola amigo, interesante el FileUpload, pero me gustaria saber como hago para guardar el archivo en un servidor remoto.
Hola disculpa como le hago para que el progres bar salga en la misma pagina en donde se ve al fileupload
esta muy bueno el ejemplo … buenaaaa
Una pregunta, el objeto Thread en donde lo declaraste?
Gracias.
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.
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
Si me funciona pero cuando quiero subir un Archivo pesado no me lo muestra
A que se debe
No me aparece por nada del mundo la progress bar(el
Como mandas a llamar tu user control dentro del boton de cargar o como seria te lo agradeceria mucho si me pudieras ayudar
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
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
muy buena aportacion amigo, gracias por compartir.
amigo ya probandolo esta muy bien en explorer pero en firefox parece que no funciona no se ve el progreso de carga
Hola, por más que intento probarlo no compila, da errores no podrían subir una proyecto ya compilado??? gracias
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… 🙁
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
Bueeeeeeeeeeenisimo el articulo!! Felicidades!! me ayudo en serio!! =d
Bueeeeeeeeeeenisimo el articulo!! Felicidades!! me ayudo en serio!! =d