Este documento explica cómo crear una tabla en MySQL para almacenar imágenes y proporciona un ejemplo de código. Se recomienda usar un campo BLOB y campos adicionales para el nombre, tamaño y formato de la imagen. También muestra cómo transferir imágenes a través de un formulario HTML, guardarlas en la base de datos, y recuperarlas para mostrarlas en una página web.

1. Imágenes en tablas
Peculiaridades de las
tablas
Creación de una tabla ejemplo
Las tablas que han de contener Lo primero de todo será disponer de una tabla en la que puedan guardarse imágenes.
imágenes deben tener campos del Aquí tienes un ejemplo.
tipo BLOB, MEDIUMBLOB o
LONGBLOB, pudiendo elegir aquel <?
de ellos que más se adecue al #el nombre de la tabla
tamaño, en bytes, de las imágenes
$base="ejemplos";
que se desean guardar en la tabla.
#definimos otra variable con el NOMBRE QUE QUEREMOS DAR A LA TABLA
Por si te has olvidado de los tipos $tabla="fotos";
de campos, aquí tienes un enlace # establecemos la conexión con el servidor
para recordarlos. $conexion=mysql_connect ("localhost","pepe","pepa");
#Seleccionamos la BASE DE DATOS en la que PRETENDEMOS CREAR LA TABLA
En el ejemplo la hemos creado con mysql_select_db ($base, $conexion);
un campo BLOB insertando
también campos para recoger su $crear="CREATE TABLE IF NOT EXISTS $tabla (";
nombre, su tamaño (en bytes), su
$crear.="num_ident INT(10) unsigned NOT NULL AUTO_INCREMENT,";
formato (el tipo de fichero
$crear.="imagen BLOB NOT NULL, ";
transferido) así como un campo
autoincremental. $crear.="nombre VARCHAR(255) NOT NULL DEFAULT '',";
$crear.="tamano VARCHAR(15) NOT NULL DEFAULT '',";
Desde este enlace -has de tener $crear.="formato VARCHAR(10) NOT NULL DEFAULT '',";
activo el servidor MySQL- podrás $crear.="PRIMARY KEY (num_ident))";
crear la tabla fotos e insertar
automáticamente algunas #Creamos la cadena, comprobamos si esa instrucción devuelve
imágenes de ejemplo. # VERDADERO o FALSO
# y dependiendo de ellos insertamos el mensaje de exito o fracaso
Crear tabla con
imágenes if(mysql_db_query ($base,$crear ,$conexion)) {
echo "<h2> Tabla $tabla creada con EXITO </h2><br>";
}else{
Transferencia de la imagen echo "<h2> La tabla $tabla NO HA PODIDO CREARSE</h2><br>";
};
El formulario para realizar la
transferencia de la imagen no # cerramos la conexión... y listo...
tiene particularidades. Es un
formulario como los de toda la mysql_close($conexion);
vida. Lo único reseñable sería ?>
incluir un campo oculto en el que
pudiera especificarse una
restricción en cuanto al tamaño Formulario para la transferencia de las imágenes
máximo permitido para cada
imagen y que debe estar acorde
con el tipo de campo utilizado en <FORM ENCTYPE="multipart/form-data" ACTION="ejemplo211.php"
la tabla. METHOD="post">
#con este input "oculto" establecemos el limite máximo
Comprobación # del tamaño del fichero a transferir. En este ejemplo 65.000 bytes
<INPUT type="hidden" name="lim_tamano" value="65000">
del tipo de imagen
<p><b>Selecciona la imagen a transferir<b><br>
<INPUT type="file" name="foto"><br>
Al transferir imágenes jpg ó png <p><b>Título la imagen<b><br>
el type MIME que recibía el <INPUT type="text" name="titulo"><br></p>
servidor es distinto según el
<p><INPUT type="submit" name="enviar" value="Aceptar"></p>
navegador que se utilice para
hacer la transferencia.
</FORM>
Aquí a la derecha, en el código
fuente del script que actualiza la Ejemplo de
base de datos, tienes los nombres transferencia de
de esos tipos asociados a los imagen
navegadores más usuales.
Hay otro aspecto a tener en Script para actualizar la base de datos
cuenta. Esa discriminación de tipos
se plantea únicamente cuando
Apache recibe una transferencia.
<?
Cuando se visualiza un contenido $foto_name= $_FILES['foto']['name'];
las cabeceras tipo de contenido $foto_size= $_FILES['foto']['size'];
(header("content-type: xx")) $foto_type= $_FILES['foto']['type'];
pueden ser las mismas para todos $foto_temporal= $_FILES['foto']['tmp_name'];
los navegadores. Esa es la razón $lim_tamano= $_POST['lim_tamano'];
por la que a la hora de incluir el $foto_titulo= $_POST['titulo'];
formato en la tabla utilizamos /* limitamos los formatos de imagen admitidos a:
image/jpg, image/gif o image/png. png que segun del navegador que ulicemos puede ser:
en IE image/x-png en Firefox y Mozilla image/png
¿Cómo guardamos la jpg que puede tener como tipo
imagen? en IE image/pjpeg en Firefox y Mozilla image/jpeg
gif que tiene como tipo image/gif en todos los navegadores
Mira los comentarios al margen sobre la variable $extensión */
La información recibida a través
del formulario requiere un ligero if ($foto_type=="image/x-png" OR $foto_type=="image/png"){
retoque antes de incluirla en le $extension="image/png";
campo BLOB de la tabla. Esa }
reconversión requiere abrir la if ($foto_type=="image/pjpeg" OR $foto_type=="image/jpeg"){
imagen en modo binario (rb) - $extension="image/jpeg";
parece que solo en el caso de }
Windows– leer el fichero completo if ($foto_type=="image/gif" OR $foto_type=="image/gif"){
y añadirle antes de las comillas $extension="image/gif";
mediante addslashes. }

2. # condicionamos la inserción a que la foto tenga nombre,
Una vez hecho el retoque ya puede # un tamaño distinto de cero y menor de límite establecido
guardarse sin más problema.
# en el formulario y que la variable extensión sea no nula
PNG con transparencias if ($foto_name != "" AND $foto_size != 0
en Internet Explorer AND $foto_titulo !='' AND
$foto_size<=$lim_tamano AND $extension !=''){
Internet Explorer no permite /*reconversion de la imagen para meter en la tabla
visualizar de forma automática las abrimos el fichero temporal en modo
transparencias de las imágenes lectura "r" binaria"b"*/
con formato png. Existen en la red $f1= fopen($foto_temporal,"rb");
algunos recursos que permiten #leemos el fichero completo limitando
solventar ese problema. # la lectura al tamaño de fichero
$foto_reconvertida = fread($f1, $foto_size);
Hemos elegido uno de ellos –
#anteponemos a las comillas que pudiera contener el fichero
pngfix.js- que puedes ver en este
# para evitar que sean interpretadas como final de cadena
enlace.
$foto_reconvertida=addslashes($foto_reconvertida);
Se trata de un fichero JavaScript # abrimos la base de datos y escribimos las intrucciones de inserción
que basta incluir en la cabecera # en el campo BLOB insertaremos la foto_reconvertida
HMTL de la página de la forma que $base="ejemplos";
ves en el ejemplo de la parte $tabla="fotos";
derecha. Cuando un navegador IE $conexion=mysql_connect ("localhost","pepe","pepa");
es detectado se ejecuta una mysql_select_db ($base, $conexion);
función contenida en ese fichero $meter="INSERT INTO ".$tabla;
que analiza la página, busca $meter .=" (num_ident, imagen, nombre, tamano, formato) ";
imágenes con extensión png y les $meter .=" VALUES('','$foto_reconvertida','$foto_titulo',";
aplica la transparencia adecuada. $meter .= "$foto_size, '$extension')";
Por esa razón, es probable que if (@mysql_query($meter,$conexion)){
inicialmente (al cargar la página) print "Foto guardada en la tabla";
se visualice la imagen opaca y }else{
que, posteriormente, adquiera la print "Ha habido un error al guardar la foto";
transparencia. }
}else{
Ver las imágenes echo "<h2>No ha podido transferirse el fichero</h2>";
}
mysql_close();
La lectura de una imagen utiliza
?>
solo dos instrucciones. Incluir la
cabecera Header en el que se
indica el tipo de contenido (el Script para leer la base de datos
famoso nombre MIME de la
imagen) y luego imprimir el
contenido del campo. <html>
<head>
Pero (por aquello de que header <!-- al margen te comentamos la razón por la que -->
debe ir incluida en el script antes
<!-- se incluyen estas líneas en rojo -->
que cualquier otra salida) si
<!--[if IE ]>
pretendemos incluir en una página
algo más que una imagen <script type="text/javascript" src="pngfix.js"></script>
tendremos que invocar esas dos <![endif]-->
funciones, de forma independiente, </head>
para cada una de ellas. <body>
<?
Por esa razón, en el ejemplo que $base="ejemplos";
tienes al margen, al desarrollar el $tabla="fotos";
ejemplo que permite visualizar
$conexion=mysql_connect ("localhost","pepe","pepa");
todas las imágenes de la tabla
mysql_select_db ($base, $conexion);
hemos tenido que incluir un script
que va leyendo la tabla que con $sacar = "SELECT * FROM ".$tabla;
contiene las imágenes para extraer $resultado = mysql_query($sacar,$conexion);
los campos informativos y a la while ($registro = mysql_fetch_array($resultado)){
hora de ver la imagen hemos de print "<center>Titulo de la imagen: ".$registro['nombre']."<br>";
recurrir a la misma técnica que se /* la inclusión de este condicional obedece a los problemas que plantea
utilizaba para ver las imágenes la visualización de las transparencias
dinámicas. de las imágenes png en Internet Explorer.
Al margen justificamos las razones de su inclusión */
Es decir, poner una etiqueta de
if($registro['formato']=="image/png"){
imagen de las de HTML pero -en
vez de escribir el nombre de la print "<img src='ver_foto.php?n=".$registro
imagen- poniendo incluyendo ['num_ident']."&v=png'><br>";
como nombre el del script que las }else{
visualiza y pasándole el número print "<img src='ver_foto.php?n=".$registro['num_ident']."'><br>";
(valor del campo autoincremental) }
de la imagen que pretendí print "Tamaño de la imagen: ".$registro['tamano']." bytes
visualizar. </center>";
El problema de los PNG en }
IE mysql_close();
?>
</body>
El JavaScript que asigna la
</html>
transparencia a las imágenes en
formato png las identifica
buscando la coincidencia de los
tres últimos caracteres del nombre Script para leer imágenes de la base datos
de la imagen con la extensión png.
Cuando se trata de imágenes <?
dinámicas el nombre de la imagen $numero=$_REQUEST['n'];
coinciden con el nombre de la $base="ejemplos";
llamada al script que se utiliza $tabla="fotos";
para su visualización. Por eso,
$conexion=mysql_connect ("localhost","pepe","pepa");
para advertir a JavaScript de que
mysql_select_db ($base, $conexion);
se trata de una imagen png
hemos incluido el condicional que $sacar = "SELECT * FROM ".$tabla." WHERE (num_ident=$numero)" ;
puedes ver en el ejemplo. De esa $resultado = mysql_query($sacar,$conexion);
forma, cuando se trata de una while ($registro = mysql_fetch_array($resultado)){

3. imagen en este formato incluimos $tipo_foto=$registro['formato'];
en la petición una variable con el header("Content-type: $tipo_foto");
valor png de forma que pueda ser
echo $registro['imagen'];
reconocida por pngfix.js y aplicada
}
la transparencia requerida.
mysql_close();
?>
Ver imágenes
guardadas
Anterior Indice Siguiente