viernes, 22 de febrero de 2008

Subir imágenes al Servidor y Guardarlas en tu Base de Datos

Llega el momento de cualquier desarrollador Web... en la que tiene la necesidad de dar la oportunidad al cliente de subir imagenes al Servidor, tal vez su foto, avatar, etc. Así mismo, aquel que trabaje con Bases de Datos tambien buscará la oportunidad de guardar archivos de imágen en una tabla, para no tener problemas al momento de respaldar y no cargar con todos los archivos.

En el siguiente Post se presenta la forma básica de hacer estas dos cosas, utilizando .NET y C# aunque facilmente puede ser aplicado en cualquier lenguaje o BD.

En primer lugar, necesitamos agregar a nuestro código las siguientes referencias:

using System.IO;
using System.Text;
using System.Drawing;

Posteriormente, necesitamos el control FileUpload, el clásico cuadro de texto y botón para seleccionar la ruta del archivo que se desea.

El procedimiento se divide en dos partes, subir la imagen al servidor y codificarla para su almacenamiento en la Base de Datos. Esta codificación se realizará en Base64, lista para almacenarse en un campo tipo texto.

Iniciemos con el evento de un botón para subir la imagen:

protected void bt_agregar_Click(object sender, EventArgs e)
{
//Variable que almacenará el nombre de la imagen
string imagen = "";

//Determinamos si se tiene un archivo que subir, una vez ya seleccionado.
if (this.FileUpload1.HasFile)
{

//Se separa la extensión del nombre del archivo para validarla
string[] nomExt = this.FileUpload1.FileName.Split('.');
string tipoFile = nomExt[nomExt.Length - 1];

//Revisamos si el archivo cuenta con una extension valida, pudiendo agregar o quitar.
if ((tipoFile == "jpg") || (tipoFile == "png"))
{

/*Si se cuenta con la extensión válida, procedemos a guardarla en el Servidor. FileUpload1.SaveAs solicita una cadena de texto con la ruta y el nombre del archivo. Server.MapPath("~/") determina la ruta de nuestra aplicación en el servidor. Si deseamos, le concatenamos otra carpeta, previamente creada*/

this.FileUpload1.SaveAs(Server.MapPath("~/") + "//moo//" + this.FileUpload1.FileName);

//Guardamos el nombre de la imagen
imagen = this.FileUpload1.FileName;

//Obtenemos su tamaño en bytes una vez que esta ya en el servidor
System.IO.FileInfo info_img = new System.IO.FileInfo(Server.MapPath("~/") + "//moo//" + this.FileUpload1.FileName);

//Lo convertimos a double y calculamos su peso en KB.
double b_img = Convert.ToDouble(info_img.Length);

//Limitamos el peso del archivo
if (b_img <= (512*1024))
{

/*Si el tamaño es válido, codificamos la imagen en Base64, un previo antes de guardarla en la base de datos. Esto se hace mediante la funcion CodificarFoto. Le enviaremos a la funcion la ruta completa de la imagen en el Servidor. Nos retornara una variable con la imagen ya codificada en Base64*/

string img_bin = CodificarFoto(Server.MapPath("~/") + "//moo//" + this.FileUpload1.FileName);

/*Guardamos la informacion en la Base de Datos. La variable img_bin contiene la imagen, pero codificada en texto, lista para almacenarse en un campo de tipos Texto o String de la Base de Datos. En esta parte puedes utilizar el método que desees para guardarla*/

//Si lo deseamos, borramos del servidor la imagen, una vez que ya esta en la BD
File.Delete(Server.MapPath("~/") + "//moo//" + this.FileUpload1.FileName);
}
}
}
}
}//Fin del evento del boton

Ahora veamos la función para Codificar la Foto

public string CodificarFoto(string sNombreArchivo)
{
//Variable para almacenar la imagen codificada
string sBase64 = "";

//Utilizamos un FileStream para acceder a la imagen en el Servidor
FileStream fs = new FileStream(sNombreArchivo, FileMode.OpenOrCreate, FileAccess.Read);

//Utilizamos un BinaryReader para pasar los datos de la imagen a un arreglo de bytes
BinaryReader br = new BinaryReader(fs);
byte[] bytes = new byte[(int)fs.Length];
br.Read(bytes, 0, bytes.Length);

//Guardamos el arreglo de bytes
sBase64 = Convert.ToBase64String(bytes);

//Retornamos la variable
return
sBase64;

//Se libera memoria
fs.Close();
fs = null;
br = null;
bytes = null;

}

Por ultimo les dejo el código para descodificar la imagen. Se entiende que ya se habrá leido la Base de Datos y recuperado la cadena (imagen codificada)

private void DecodificarFoto(string sBase64, string nombre_file)
{
/*Guardamos en una cadena la ruta de la imagen donde se descodificará. Es decir, despues de este proceso, estara guardada en el disco duro del servidor*/
string sImagenTemporal = Server.MapPath("~/") + "moo//" + nombre_file;

//Utilizamos un FileStream para crear un nuevo archivo temporal
FileStream fs = new FileStream(sImagenTemporal, FileMode.CreateNew, FileAccess.Write);

//Un BinaryWriter para escribir la imagen descodificada
BinaryWriter
bw = new BinaryWriter(fs);

//Un arreglo de Bytes para descodificar la imagen
byte
[] bytes;
bytes = Convert.FromBase64String(sBase64);

//Escribimos la imagen
bw.Write(bytes);

//Liberamos memoria
fs.Close();
bytes = null;
bw = null;
sBase64 = null;

}

1 comentario:

Julius dijo...

Excelente que hayas posteado esto Dr Omm. Es muy buena base de conocimientos, ojala y puedas retomar tu blog y seguir posteando articulos como este.
Saludos