Buscando información de como subir imágenes al servidor utilizando ASP.NET, me encontré con un artículo interesante, que muestra un ejemplo sobre el tema donde resalta como ejecutar el evento PostBack de un linkButton, utilizando el método __doPostBack en Javascript.
Lo que hace el siguiente código es utilizar un control fileUpload para subir una imagen. Lo que hace diferente es que no utiliza un botón extra para ejecutar el postback y enviar el archivo al servidor, si no que al momento de que el usuario lo selecciona, se ejecuta el evento de un linkButton oculto que tiene el código necesario para subir la imagen.
Esto se logra invocando el método __doPostBack, seleccionando el control que se desea ejecutar. De esta manera, desde javascript podemos invocar el code behind que necesitemos para lograr un objetivo.
Además, el ejemplo muestra como crear un thumbnail o vista previa de la imágen y se pregunta al usuario si desea guardarla o no. Ya esto último es extra y puede caer en discusión su funcionalidad.
Los controles principales que se necesitan son:
- FileUpload de nombre fileUpload.
- HiddenField de nombre hdFileName
- HiddenField de nombre hdFileNameThumb
- LinkButton de nombre linkBt
- Button de nombre btGuardar
- Button de nombre btCancelar
- Image de nombre image
Además necesitamos los siguientes espacios de nombre:
using System.IO;
using System.Drawing.Imaging;
Y el código es el siguiente:
Las funciones Javascript:
var x = 5000;
var Guardar;
function asignarRutaImagen()
{
/*Esta funcion esperara hasta que el usuario haya elegido un archivo*/
var tiempo, tiempo2;
if(x >= 0)
{
x-=1;
if (document.form1.fileUpload.value == "")
{
tiempo2 = setTimeout("asignarRutaImagen()", 50);
}
else
{
document.form1.hdFileName.value =
document.form1.fileUpload.value;
x=-1;
/*Genera un postback e invoca el evento
click del linkbutton*/
__doPostBack('linkBt','');
}
}
}
function validarkey()
{
/*Para que use el browse y no teclee la ruta*/
alert ("Presione el boton Browse para buscar una imagen");
return false;
}
El CodeBehind:
protected void Page_Load(object sender, EventArgs e)
{
/*Hacemos limpieza del buffer y encabezados*/
this.Response.BufferOutput = false;
this.Response.Clear();
this.Response.ClearHeaders();
/*Agregamos al FileUpload, a sus eventos onclick y onkeypress,
las funciones asignarRutaFoto y validarKey*/
this.fileUpload.Attributes.Add("onclick",
"javascript:asignarRutaImagen();");
this.fileUpload.Attributes.Add("onkeypress",
"javascript:return validarkey();");
}
protected void linkBt_Click(object sender, EventArgs e)
{
try
{
/*Este evento se generara desde la funcion javascript
asignarRutaFoto*/
if (this.fileUpload.HasFile == true)
{
cargarFotografia();
mostrarImagen();
this.btGuardar.Visible = true;
this.btCancelar.Visible = true;
}
}
catch (Exception ex)
{
this.lblMsg.Text = ex.Message;
}
}
private void cargarFotografia()
{
/*Obtenemos el nombre y la extension del archivo*/
String fileName = Path.GetFileName(this.fileUpload.PostedFile.FileName);
String extension = Path.GetExtension(
this.fileUpload.PostedFile.FileName).ToLower();
try
{
if (extension != ".png" && extension != ".jpg" &&
extension != ".bmp")
{
this.lblMsg.Text = "El archivo ingresado no es una imagen";
}
else
{
/*Se guarda la imagen en el servidor*/
this.fileUpload.PostedFile.SaveAs(
Server.MapPath("\\imagesTemp\\") + fileName);
/*Obtenemos el nombre temporal de la imagen
con la siguiente funcion*/
String nombreImgServer = getNombreImagenServidor(extension);
this.hdFileName.Value = nombreImgServer;
/*Cambiamos el nombre de la imagen por el nuevo*/
File.Move(Server.MapPath("\\imagesTemp\\") + fileName,
Server.MapPath("\\imagesTemp\\" + nombreImgServer));
}
}
catch (Exception ex)
{
this.lblMsg.Text = ex.Message;
}
}
public String getNombreImagenServidor(String extension)
{
/*Devuelve el nombre temporal de la imagen*/
Random nRandom = new Random();
String nr = Convert.ToString(nRandom.Next(0, 32000));
String nombre = nr + "_" + DateTime.Today.ToString("ddMMyyyy") + extension;
nRandom = null;
return nombre;
}
private void mostrarImagen()
{
/*Muestra la imagen como un thumbnail*/
System.Drawing.Image objImage = null, objThumbnail = null;
Int32 width, height;
String fileName = Server.MapPath("imagesTemp\\") +
Path.GetFileName(this.hdFileName.Value);
Stream stream = null;
try
{
/*Se guarda la imagen en un stream para despues colocarla
en un objeto para que la imagen no quede abierta en el servidor*/
stream = File.OpenRead(fileName);
objImage = System.Drawing.Image.FromStream(stream);
width = 100;
height = objImage.Height / (objImage.Width / width);
this.Response.Clear();
/*Se crea el thumbnail y se muestra en la imagen*/
objThumbnail = objImage.GetThumbnailImage(
width, height, null, IntPtr.Zero);
objThumbnail.Save(Server.MapPath("imagesTemp\\") +
"thumb_" + this.hdFileName.Value, ImageFormat.Jpeg);
this.image.Visible = true;
String nombreImgThumb = "thumb_" + this.hdFileName.Value;
this.hdFileNameThumb.Value = nombreImgThumb;
this.image.ImageUrl = "~/imagesTemp//" + nombreImgThumb;
}
catch(Exception ex)
{
this.lblMsg.Text = ex.Message;
}
finally
{
/*Limpiamos los objetos*/
objImage.Dispose();
objThumbnail.Dispose();
stream.Dispose();
objImage = null;
objThumbnail = null;
stream = null;
}
}
protected void btGuardar_Click(object sender, EventArgs e)
{
try
{
/*Borramos la imagen thumbnail y movemos la imagen elegida a la
carpeta correcta*/
if (this.hdFileNameThumb.Value.Length > 0)
{
File.Delete(Server.MapPath("\\imagesTemp\\" +
this.hdFileNameThumb.Value));
}
if (this.hdFileName.Value.Length > 0)
{
File.Move(Server.MapPath("\\imagesTemp\\") +
this.hdFileName.Value, Server.MapPath("\\images\\" +
this.hdFileName.Value));
}
}
catch (Exception ex)
{
this.lblMsg.Text = ex.Message;
}
}
protected void btCancelar_Click(object sender, EventArgs e)
{
try
{
/*Borramos las imagenes de la carpeta temporal*/
if (this.hdFileNameThumb.Value.Length > 0)
{
File.Delete(Server.MapPath("\\imagesTemp\\" +
this.hdFileNameThumb.Value));
}
if (this.hdFileName.Value.Length > 0)
{
File.Delete(Server.MapPath("\\imagesTemp\\" +
his.hdFileName.Value));
}
}
catch (Exception ex)
{
this.lblMsg.Text = ex.Message;
}
}
Les dejo algunas imágenes de su funcionamiento y la liga al código fuente para que lo descarguen si desean mayor referencia.
Espero les sea útil y cualquier comentario o crítica es bien recibida.
