.

jueves, 18 de diciembre de 2014

Guardar y Mostrar Imagen usando Base64 con MySQL y PHP

Lo que necesitaras es lo siguiente:


  1. En tu Base de Datos crearas un campo dentro de tu tabla, para guardar tu imagen. Este deberá ser del tipo LONGBLOB.
  2. Crearas las siguientes paginas con formato .php:


    • Conexion.php
    • Ingresar Imagen.php
    • Guardar imagen.php
    • Mostrar Imagen.php


Conexion.php

<?php
$server = "localhost";//nombre del servidor
$usuario = "root";//nombre del usuario
$pwd = "";//contraseña de mysql
$db = "guardar_imagen";//nombre de la base de datos

$conexion = mysql_connect($server,$usuario,$pwd,$db);
$link = $conexion;

if (!$conexion)
{
die("No hay conexi&oacute;n con el servidor, disculpe las molestias.");
}
mysql_select_db($db);
?>

Ingresar Imagin.php

<form action="Guardar imagen.php" method="POST" enctype="multipart/form-data" style="padding:5px;">
      Imagen: <input type="file" name="foto" />
   
     <div style="margin-left: 70px;"></br><input value="Subir Imagen" type="submit" /></div>
</form>

Guardar imagen.php

<?php
include("conexion.php");
?>

<?php
     $foto_name= $_FILES["foto"]["name"];
     $foto_size= $_FILES["foto"]["size"];
     $foto_type= $_FILES["foto"]["type"];
     $foto_temporal= $_FILES["foto"]["tmp_name"];

echo $foto_size;
# Limitamos los formatos de imagen admitidos a: png, jpg y gif
     if ($foto_type=="image/x-png" OR $foto_type=="image/png")
     {
      $extension="image/png";
     }
     if ($foto_type=="image/pjpeg" OR $foto_type=="image/jpeg")
     {
      $extension="image/jpeg";
     }
     if ($foto_type=="image/gif" OR $foto_type=="image/gif")
     {
      $extension="image/gif";
     }

/*Reconversion de la imagen para meter en la tabla abrimos el fichero temporal en modo lectura "r" y binaria "b"*/
      $f1= fopen($foto_temporal,"rb");

# Leemos el fichero completo limitando la lectura al tamaño del fichero
      $foto_reconvertida = fread($f1, $foto_size);

/* Anteponemos "\" a las comillas que pudiera contener el fichero para evitar que sean interpretadas como final de cadena.*/
 $foto_reconvertida = base64_encode($foto_reconvertida);

//cerrar el fichero temporal
fclose($f1);


/* QUERY O CONSULTA PARA GUARDAR LA IMAGEN A LA BASE DE DATOS */
$query="INSERT INTO imagen (Foto, Nombre, Tamano, Formato) values('".$foto_reconvertida."', '".$foto_name."', '".$foto_size."', '".$foto_type."')";
$result =mysql_query($query);
?>
<form action="Mostrar Imagen.php" method="POST" target="" style="padding:5px;">
       ID:<br /> <input name="ID" type="text" size="32" maxlength="20"/><br /><br />
       <div style="margin-left: 30px;" ><input name="" value="Ver Imagen" type="submit" /></div>
</form>

Mostrar Imagen.php

<?php
include("conexion.php");
?>

<?php
$id=$_POST["ID"];

# Buscamos la imagen a mostrar
$query = ("SELECT * FROM `imagen` WHERE ID='".$id."'");
$result = mysql_query($query);

# Mostramos la imagen
while ($row=mysql_fetch_assoc($result)){
$id=$row['ID'];
$nombre=$row['Nombre'];
$tamano=$row['Tamano'];
$formato=$row['Formato'];

header("Content-type:".$row["Formato"]);
$foto= $row['Foto'];

//Decodificamos $Base64Img codificada en base64.
$Base64Img = base64_decode($foto);
//escribimos la información obtenida en un archivo llamado
//unodepiera.png para que se cree la imagen correctamente
file_put_contents('unodepiera.png', $Base64Img);  

echo"
<div style='width: 790px;'>
<table>
<tr>
<td><strong>ID:</strong>  $id</td>
</tr>
<tr>
<td><strong>Imagen:</strong> <img src='unodepiera.png' alt='unodepiera' width='100' heigth='100'/></td>
</tr>
<tr>
<td><strong>Nombre:</strong> $nombre</td>
</tr>
<tr>
<td><strong>Tamano:</strong> $tamano</td>
</tr>
<tr>
<td><strong>Formato:</strong> $formato</td>
</tr>
</table>
</div>
";
}
?>

<form action="Ingresar imagen.php" />
     <div style="margin-left: 70px;"></br><input value="Subir Otra Imagen" type="submit" /></div>
</form>

<form action="" method="POST" target="" style="padding:5px;">
       ID:<br /> <input name="ID" type="text" size="32" maxlength="20"/><br /><br />
       <div style="margin-left: 30px;" ><input name="" value="Ver Imagen" type="submit" /></div>
</form>




Si el contenido le ha sido de utilidad, lo invitamos a hacer una donación en el siguiente botón.

La cantidad que sea de su voluntad entregar


En caso que no se visualice el contenido, hacer recargar (refresh) a la página que sea abierta.



Administrar Editor de Texto JOOMLA