Almacenamiento de imgenes en bases de

datos con PHP

Contenido
[ocultar]

1 Almacenamiento de imgenes en bases de datos con PHP

o

1.1 Introduccin, mtodo clsico de subida de archivos

1.2 Requerimientos previos

1.3 Formulario para subir imgenes

1.4 Almacenar un fichero en base de datos

1.5 Cmo mostrar una imagen almacenada en la base de datos

Almacenamiento de imgenes en bases de datos

con PHP
Introduccin, mtodo clsico de subida de archivos
A la hora de almacenar imgenes en un servidor, lo ms normal es subir el fichero y
almacenarlo en alguna carpeta determinada en nuestro servidor.
Vase un ejemplo rpido de cmo se pueden almacenar ficheros en el servidor:
Ejemplo de funcin PHP para subir archivos al servidor: funciones.php
<?php
/**
* subir_fichero()
*
* Sube una imagen al servidor al directorio especificado teniendo el
Atributo 'Name' del campo archivo.
*
* @param string $directorio_destino Directorio de destino dnde queremos
dejar el archivo
* @param string $nombre_fichero Atributo 'Name' del campo archivo
* @return boolean
*/
function subir_fichero($directorio_destino, $nombre_fichero)
{

$tmp_name = $_FILES[$nombre_fichero]['tmp_name'];
//si hemos enviado un directorio que existe realmente y hemos subido
el archivo
if (is_dir($directorio_destino) && is_uploaded_file($tmp_name))
{
$img_file = $_FILES[$nombre_fichero]['name'];
$img_type = $_FILES[$nombre_fichero]['type'];
echo 1;
// Si se trata de una imagen
if (((strpos($img_type, "gif") || strpos($img_type, "jpeg") ||
strpos($img_type, "jpg")) || strpos($img_type, "png")))
{
//Tenemos permisos para subir la imgen?
echo 2;
if (move_uploaded_file($tmp_name, $directorio_destino . '/' .
$img_file))
{
return true;
}
}
}
//Si llegamos hasta aqu es que algo ha fallado
return false;
}
?>

Ejemplo de formulario de envo: formulario.html

<form id="form1" enctype="multipart/form-data" method="post"
action="recepcion.php">
<label>Imagen
<input id="campofotografia" name="campofotografia" type="file" />
</label>
<input id="enviar" name="enviar" type="submit" value="Enviar" />
</form>

Ejemplo de uso de la funcin de envo de ficheros: recepcion.php

<?php
require_once 'funciones.php';
if(!empty($_POST)){
if (subir_fichero('imagenes','campofotografia'))
echo 'Archivo recibido correctamente';
}
?>

Requerimientos previos
Hemos visto como se pueden subir imgenes a una carpeta del servidor usando PHP. Lo que
queremos hacer ahora es almacenar esa imagen en una base de datos en lugar de un
directorio del servidor. Podemos almacenar cualquier tipo de archivo y el mtodo a utilizar se
puede EMPLEAR en cualquier tipo de base de datos, aunque nosotros lo vamos a hacer
para MySQL.
Lo primero que tendramos que hacer es definir unos campos en la base de datos para
almacenar dicho contenido:
CREATE TABLE `imagenes` (
`imagen_id` INT(11) AUTO_INCREMENT PRIMARY KEY,
`imagen` mediumblob,
`tipo_imagen` VARCHAR(30)
)

El campo mediumblob se EMPLEA para almacenar datos binarios. Existen cuatro tipos de
BLOB:

TINYBLOB: permite hasta 255 caracteres, mximo 256Bytes.

BLOB: permite hasta 65535 caracteres, mximo 65KB.

MEDIUMBLOB: permite hasta 16777215 caracteres, mximo 16MB.

LONGBLOB: permite hasta 4294967295 caracteres, mximo 4GB.

En el campo tipo_imagen almacenaremos el MIME TYPE de ese fichero.

sto es imprescindible para PHP, ya que cuando el servidor enva los datos binarios a un
navegador web, tiene que indicar previamente de qu tipo de datos se tratan, sino el
navegador web no sabra como representar esos datos.
Hay que tener en cuenta que en el campo imagen slo se almacenar el contenido binario de
las imgenes, nunca el nombre del fichero o la extensin del archivo; por eso es necesario
guardar el mime type, para que PHP indique el tipo de datos que est enviando y as el
navegador pueda interpretar correctamente esos datos y representarlos.

Formulario para subir imgenes

formulario.html
<form action="almacenar.php" method="POST" enctype="multipart/form-data">
<label for="imagen">Imagen:</label>
<input type="file" name="imagen" id="imagen" />
<input type="submit" name="subir" value="Subir Imagen"/>
</form>

Almacenar un fichero en base de datos

almacenar.php

<?php
// Conexion a la base de datos
mysql_connect("servidor", "usuario", "contrasena") or die(mysql_error());
mysql_select_db("base_de_datos") or die(mysql_error());
// Comprobamos si ha ocurrido un error.
if (!isset($_FILES["imagen"]) || $_FILES["imagen"]["error"] > 0)
{
echo "Ha ocurrido un error.";
}
else
{
// Verificamos si el tipo de archivo es un tipo de imagen permitido.
// y que el tamao del archivo no exceda los 16MB
$permitidos = array("image/jpg", "image/jpeg", "image/gif",
"image/png");
$limite_kb = 16384;
if (in_array($_FILES['imagen']['type'], $permitidos) &&
$_FILES['imagen']['size'] <= $limite_kb * 1024)
{
// Archivo temporal
$imagen_temporal = $_FILES['imagen']['tmp_name'];
// Tipo de archivo
$tipo = $_FILES['imagen']['type'];
// Leemos el contenido del archivo temporal en binario.
$fp = fopen($imagen_temporal, 'r+b');
$data = fread($fp, filesize($imagen_temporal));
fclose($fp);
//Podramos utilizar tambin la siguiente instruccin en lugar de
las 3 anteriores.
// $data=file_get_contents($imagen_temporal);
// Escapamos los caracteres para que se puedan almacenar en la
base de datos correctamente.
$data = mysql_escape_string($data);
// Insertamos en la base de datos.
$resultado = @mysql_query("INSERT INTO imagenes (imagen,
tipo_imagen) VALUES ('$data', '$tipo')");

if ($resultado)
{
echo "El archivo ha sido copiado exitosamente.";
}
else
{
echo "Ocurri algun error al copiar el archivo.";
}
}
else
{
echo "Formato de archivo no permitido o excede el tamao lmite
de $limite_kb Kbytes.";
}
}
?>

Cmo mostrar una imagen almacenada en la base de datos

Para mostrar una imagen utilizamos la marca html IMG:
<img src="fotografia.jpg"/>

Pero en este caso la imagen la vamos a obtener de la base de datos.

Para ello, en lugar de poner el nombre de la imagen en SRC, tendramos que poner un fichero
PHP al que le pasamos el ID de la fotografa que queremos mostrar (o bien otro dato por el
que queramos buscar esa fotografa) y que se encargar de devolvernos la imagen desde la
base de datos.
Podra ser algo as:
<img src="obtenerfotografia.php?id=21"/>

obtenerfotografia.php
<?php
// Conexion a la base de datos
mysql_connect("servidor", "usuario", "contrasena") or die(mysql_error());
mysql_select_db("base_de_datos") or die(mysql_error());
if ($_GET['id'] > 0)
{
// Consulta de bsqueda de la imagen.
$consulta = "SELECT imagen, tipo_imagen FROM imagenes WHERE
imagen_id={$_GET['id']}";
$resultado = @mysql_query($consulta) or die(mysql_error());
$datos = mysql_fetch_assoc($resultado);
$imagen = $datos['imagen']; // Datos binarios de la imagen.

$tipo = $datos['tipo_imagen']; // Mime Type de la imagen.

// Mandamos las cabeceras al navegador indicando el tipo de datos que
vamos a enviar.
header("Content-type: $tipo");
// A continuacin enviamos el contenido binario de la imagen.
echo $imagen;
}
?>

Slo les comentar de la mejoras y notas u observaciones. Al final les dejo el link
de descarga de los archivos.
Slo descarguen el archivo, creen la BD con la tabla y listo!, no tienen que
modificar nada y obviamente modifiquen el archivoconector.inc.php que est
dentro de libs.

Cdigo :

<?php

$Server="localhost";
$User="root";
$Pass="pass";
$DataBase="test";

?>

Si todo sale bien deber quedar la nueva interfaz de la siguiente manera.

Les mostrar lo nuevo que se ha modificado a esta gran aplicacin. Primero la

tabla fue alterada con nuevos campos que nos ayudar a imprimir en lista una
representacin grfica de lo que se ha subido.

Lo he adoptado para soportar diferentes tipos de archivos a subir. Cuando

sube el archivo vers el tipo de cono que representa segn el tipo archivo. Y lo
ms importante es que pueden eliminar del archivo tanto el registro de la tabla
como el archivo mismo.

Ustedes pueden agregar ms de un tipo de archivo mediante el

archivo nuevaimagen.js

Cdigo :

$(document).ready(function() {
$("#file_upload").fileUpload({
'uploader': 'uploadify/uploader.swf',
'cancelImg': 'uploadify/cancel.png',
'script': 'libs/subirarchivo.php',

'folder': 'uploads',
'buttonText': 'examinar',
'checkScript': 'uploadify/check.php',
'fileDesc': 'Archivos',
'auto':false,
//Extensiones permitidas para carga de los archivos
'fileExt':
'*.jpg;*.jpeg;*.gif;*.png;*.xlsx;*.docx;*.html;*.txt;*.pdf;*.
zip',

//Puede ingresar mas de 1 archivo a la vez, false solo

1 archivo

'multi': true,
'displayData': 'percentage',
onComplete: function (){
verlistadoimagenes();
$("#txtdes").val('');
}

});
$('#txtdes').bind('change', function(){
$('#file_upload').fileUploadSettings('scriptData','&des='+
$(this).val());

});

})

En este mismo cdigo lo ms importante y fabuloso es que puedes activar o

desactivar la carga mltiple de archivos o bien la carga individual de
archivos, slo modificando el valor "multi:true o false".

Cdigo :

//Puede ingresar mas de 1 archivo a la vez, false solo 1

archivo
'multi': true,
'displayData': 'percentage',

Con esto no tendrs ningn problema en entenderlo, espero les guste este nuevo
cambio, intento mejorar la aplicacin poniendo modo de vista, grid o list.
Aqu les pongo la el link para que descarguen y lo disfruten. Descargar