Aporte:Manejador de Imagenes con Doble Visualizacion

Prais · #1 (**permalink**) 03/01/2011, 19:32

Ya Amigos del foro, lo prometido es deuda, aca les posteo el manejador de imagenes, para que nadien se quiebre tanto la cabeza como yo.

1).- Debo decir que el codigo es integramente de CARICATOS, yo solo modifique algunas cosas para mi necesidad.

2).- Agradesco a todos los que colaboraron para que esto resultara y si lo podemos mejorar mucho mejor.

ya Les cuento, no hay ninguna pilleria solo copien y pegen y luego cuando lo visualizen por localhost, solo lo adaptan y ya.
Consta de 4 archivos: file.php, KG_imagen_I1.php, previsor.php, previendo.php.

Debo decir que esto parte en un listado principal donde tengo un imagen pequeñita que dice ver imagen, cuando un usuario hace click en la imagen se habre el popup con la doble visualizacion, que muestra la imagen actual de un producto y el otro visor para cargar la imagen que se desea actualizar:
Nota: solo permite una imagen por producto.
Nota: No sube la imagen a la base de datos, solo el nombre, y la imagen la traslada a una carpeta destinada para este fin.

Entonces les posteo el llamado a la funcion para abrir el popup:

Código HTML:

Ver original<a href="javascript:Abrir_ventana('FILE/file.php?id_producto=<? echo $CaptureReg['ID_PRODUCTO'];?>')">
<img src="../../images/KG_ver_imagen.png" title="Ver Imágen" border="0"/></a>

Como pueden ver aca al hacer click llamara a la funcion para abrir el popup, noten que le envio el id del producto, para poder discriminar cual es la imagen asociada al producto:
Les posteo la funcion que abre el popup:

Código Javascript:

Ver originalfunction Abrir_ventana(pagina) {
var opciones="toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, width=760, height=430, top=85, left=140";
window.open(pagina,"",opciones);}

Nota: le paso la pagina al popup en el primer ejemplo que postie(file.php) y no en esta funcion, esta pegenla tal cual.

Ahora que tenemos el popup listo veamos que contiene la pagina que se carga dentro del popup (file.php):

Código PHP:

Ver original<html>
    <head><title>Subir Foto</title>
<?php include("conexion.php");// se conenctan a la base de datos.
$id_producto=$_REQUEST['id_producto']; // rescata el id_producto, enviado desde el listado principal ("popup")
$Result=mysql_query("select ID_PRODUCTO,DE_IMAGEN from lk_inv_producto where ID_PRODUCTO='$id_producto'",$cn); //hacen la consulta, para ver la imagen que tiene actualmente el producto
$IdProducto=mysql_fetch_array($Result); ?>
 
<script type="text/javascript"> //funciones necesarias, para controlar la imagen antes de subir el nombre en la bd.(ancho,peso,altura)
 
function actuar(peso, anchura, altura) {            
                this.peso.value = peso;                     this.ancho.value = anchura;                     this.alto.value = altura;}
     
function ini() {
    document.forms.formu.actualizar = actuar;
    window.frames.ver.location.href = "previsor.php";
    document.forms.formu.actualizar(0, 0, 0);}      
 
function validar(f){
    enviar = /\.(gif|jpg|png|ico|bmp)$/i.test(f.archivo.value);
    if (!enviar)    alert("seleccione imagen");
    return enviar;}     
 
function limpiar(){
    document.forms.formu.actualizar(0, 0, 0);
    f = document.getElementById("archivo");
    nuevoFile = document.createElement("input");
    nuevoFile.id = f.id;
    nuevoFile.type = "file";
    nuevoFile.name = "archivo";
    nuevoFile.value = "";
    nuevoFile.onchange = f.onchange;
    nodoPadre = f.parentNode;
    nodoSiguiente = f.nextSibling;
    nodoPadre.removeChild(f);
    (nodoSiguiente == null) ? nodoPadre.appendChild(nuevoFile):
    nodoPadre.insertBefore(nuevoFile, nodoSiguiente);}  
 
function checkear(f) {
             function no_prever() {
    alert("El fichero seleccionado no es válido...");
    limpiar();} 
 
function prever() {
             
    var campos = new Array("maxpeso", "maxalto", "maxancho");
    for (i = 0, total = campos.length; i < total; i ++)
    f.form[campos[i]].disabled = false;
    actionActual = f.form.action;
    targetActual = f.form.target;
    f.form.action = "previsor.php";
    f.form.target = "ver";
    f.form.submit();
    for (i = 0, total = campos.length; i < total; i ++)
    f.form[campos[i]].disabled = true;
    f.form.action = actionActual;
    f.form.target = targetActual;}
    (/\.(gif|jpg|png|ico|bmp)$/i.test(f.value)) ? prever() : no_prever();}  
 
function datosImagen(peso, ancho, alto, error){
         function mostrar_error() {
    enviar = false;                 
    mensaje = "Ha habido un error (error nº " + error + "):";
    if (error % 2 == 1) // tipo incorrecto
    mensaje += "\nel fichero no es válido";
    error = parseInt(error / 2);
    if (error % 2 == 1) // excede en peso
    mensaje += "\nla Imagen excede el Peso (" + peso + ").";
    error = parseInt(error / 2);
    if (error % 2 == 1) // excede en anchura
    mensaje += "\nla Imagen excede en Anchura (" + ancho + ").";
    error = parseInt(error / 2);
    if (error % 2 == 1) // excede en altura
    mensaje += "\nla Imagen excede en Altura (" + alto + ").";
    error = parseInt(error / 2);
    alert (mensaje);
    limpiar();}
    if (error == 0)
    document.forms.formu.actualizar(peso, ancho, alto);
    else
    mostrar_error();}       
 
function Cerrar() {
    window.close();}
</script></head>
 
<body onLoad="ini()" >
    <table width="500" height="309" border="1">
<form action="KG_imagen_I1.php" method="post" enctype="multipart/form-data" onSubmit="return validar(this)" name="formu" style="margin: auto; text-align: center;">
    <tr>
        <td width="200"><div align="center">Imagen Actual </div></td>
        <td width="200"><div align="center">Nueva Imagen </div></td>
        <td width="176"></td>
  </tr>
   <tr>
        <td>
<? if ($IdProducto['DE_IMAGEN']=='N/I') { ?>//consulto el valor que me trajo del sql inicial, si su valor es 'N/I', entonces mustra la imagen por defecto, ya que yo evito guardar datos nulos en las bd, si no tiene nada se guarda como 'N/I'(No Informado).
<img name="de_imagen" src="../../../images_inventario/KG_00_SinFotoProducto.png" style="display: block; margin: auto; border-width: 2px; width: 284px; height: 330px;">//Aca le dan la ruta que ustedes tienen, logico que no es la misma que la mia.
<? } else { ?> // Si No, muestra la imagen que corresponde y le entrego su id_producto
<img name="de_imagen"  src="../../../images_inventario/<?=$IdProducto['DE_IMAGEN'];?>" style="display: block; margin: auto; border-width: 2px; width: 284px; height: 330px;">// Nuevamente denle su ruta, de imagenes.
    ? } ?>
    </td>
     <td>
<iframe src="previsor.php" id="ver" name="ver" style="display: block; margin: auto; border-width: 2px; width: 284px; height: 330px;"></iframe>
</td>
    <td><fieldset style="width: 93%"><legend>Límites aceptados</legend>
    peso máximo: 
    <input type="text" disabled name="maxpeso" value="80000" />
<input type="hidden" name="id_producto" id="id_producto" value="<?=$IdProducto['ID_PRODUCTO'];?>"/>// Le envio el id a KG_imagen_I1.php, para que haga el cambio en la bd
    anchura máxima: 
    <input type="text" disabled name="maxancho" value="640" />
    altura máxima: 
    <input type="text" disabled name="maxalto" value="480" />
</fieldset><br><br><fieldset style="width: 93%"><legend>Valores actuales</legend>
    peso actual: 
    <input type="text" readonly name="peso" id="peso" value="0" />
    anchura actual: 
    <input type="text" readonly name="ancho" id="ancho" value="0" />
    altura actual: 
    <input type="text" readonly name="alto" id="alto" value="0" />
    </fieldset></td>
    </tr>
     <tr>
        <td>
<div align="center"><input type="file" name="archivo" id="archivo" style="cursor:pointer" onchange="checkear(this)"style="width: 80%"/></div>
    </td>
        <td>
<div align="center"><input type="submit" class="button" style="cursor:pointer" value="Guardar Cambios"/></div>
        </td>
         <td>
<div align="center"><input type="button" onClick="Cerrar();" style="cursor:pointer" value="Cancelar"/></div>
        </td>
    </tr>
        </form>
    </table>
</body>
</html>

Ahora Veamos el archivo al que le enviamos los datos(KG_imagen_I1.php):

Código PHP:

Ver original<?php session_start(); include("conexion.php");//conexion a la bd
 
$id_producto=$_REQUEST['id_producto']; //rescato el id_producto,enviado de file.php.-
$filenombre = $_FILES['archivo']['name']; // asigno nombre del archivo, para entregarselo al update.-
$uploaddir = $_SERVER['DOCUMENT_ROOT'].'/proyecto/images_inventario/';  //ruta de almacenamiento.-
$uploadfile = $uploaddir. $_FILES['archivo']['name']; //asigna al archivo el directorio.-
$uploadcheck = $uploadfile;
 
//Nota: no estoy guardando ni el peso de la imagen, ni el alto,ni el ancho, no me interesa, ya que solo lo controlo de afuera y nada mas,ahora si lo quieren guardar recuerden rescatar las variables y pasarselas al update, ya que aca solo le paso el nombre de la imagen, la cual viene en '$filenombre'.-
if(empty($_FILES['archivo']['name'])){$uploadfile = "";}
        mysql_query("update lk_inv_producto set DE_IMAGEN='$filenombre' where ID_PRODUCTO='$id_producto'",$cn) or die(mysql_error());
        
echo "<pre>";
if (move_uploaded_file($_FILES['archivo']['tmp_name'], $uploadfile)) {
echo "El archivo fue subido con éxito \n";
echo "Información del archivo:";
print_r($_FILES);
} else {
echo "El archivo no se pudo subir, información:\n";
print_r($_FILES);
}
echo "</pre>";
mysql_close($cn);?>
<script>
setTimeout(function(){opener.location.reload(true) ; window.close();}, 1000); //obligo al popup a cerrar la ventana una vez, hecho click en el botton "guardar cambios".
</script>

Los otros 2 archivos a continuacion ya que voy a exeder el maximo de caracteres .

Prais · #2 (**permalink**) 03/01/2011, 19:32

Los que ya postie son las archivos que mas interactuamos, pero como ya esta construido solo copiar y pegar, ahora faltan solo 2 archivos el previsor.php y el previendo.php

Nota: Aca no tienen que cambiar nada(solo la conexion a la base de datos), solo asegurense de que esten en el mismo directorio.

previsor.php:

Código PHP:

Ver original<?php session_start(); include("conexion.php");
 
    $defecto = "KG_00_SinFotoProducto.png";
    $Ok = isset($_FILES["archivo"]);
    $url = ($Ok) ? $_FILES["archivo"]["tmp_name"] : $defecto;
    list($anchura, $altura, $tipoImagen, $atributos) = getimagesize($url);
    $error = (isset($atributos)) ? 0 : 1;
    $los_tipos = array("gif", "jpg", "png");
    $tipo = ($Ok) ? "image/".$los_tipos[$tipoImagen - 1] : "image/png";
    $fichero = ($Ok && ($error == 0)) ? $_FILES["archivo"]["name"] : $defecto;
    $tam = filesize($url);
    $OkTam = isset($_POST["maxpeso"]);
    $OkAncho = isset($_POST["maxancho"]);
    $OkAlto = isset($_POST["maxalto"]);
    $maxTam = ($OkTam) ? (int) $_POST["maxpeso"]: 100000;
    $maxAncho = ($OkAncho) ? (int) $_POST["maxancho"]: 640;
    $maxAlto = ($OkAlto) ? (int) $_POST["maxalto"]: 480;
    $error += ($tam <= $maxTam) ? 0 : 2;
    $ancho = ($error == 1) ? 0 : $anchura;
    $alto = ($error == 1) ? 0 : $altura;
    $error += ($ancho <= $maxAncho) ? 0 : 4;
    $error += ($alto <= $maxAlto) ? 0 : 8;
    $datos = ($error == 0) ? $url : $defecto;
    $onload = ($Ok) ? "onload='parent.datosImagen($tam, $ancho, $alto, $error)'": '';
    $datos_imagen = fread(fopen($datos, "rb"), filesize($datos)); 
    $_SESSION["cont"] = $datos_imagen;
    $_SESSION["tipo"] = ($error == 0) ? $tipo : "image/png";?>
<html>
     <head>
     <style type="text/css" >
    html    {height: 100%;}
    body    {height: 100%;
    overflow: hidden;
    background-color: #eeeeee;
    background-image: url(previendo.php?dato=<?=$fichero;?>); 
    background-repeat: no-repeat;
    background-position: center center;}
    </style>
    </head>
<body <?=$onload;?>></body>
</html>

Y por ultimo el previendo.php:

Código PHP:

Ver original<?php session_start();
$url = ($_SESSION["cont"] == "")
? fread(fopen("KG_00_SinFotoProducto.png", "rb"), filesize("KG_00_SinFotoProducto.png"))
: $_SESSION["cont"];
$tip = ($_SESSION["tipo"] == "")
? "image/png"
: $_SESSION["tipo"];
header("Content-type: $tip");
echo $url;
session_destroy();?>

Y eso seria Foreros espero les haya gustado, cualquier duda solo pregunten, y recuerden que si lo podemos mejorar mucho mejor. al menos con esto ya se pueden defender..
Espero pronto hacer nuevos aportes.-

Saludos.-

phpfan · #3 (**permalink**) 03/01/2011, 19:43

-se aplaude solo el loco ,, jaja luego lo miro se interesante. tienes que darme una url donde este la demostracion nose a que te refieres , creo que lo e visto antes pero muestrame un ejemplo en una url ,felicidades ,saludos.

Prais · #4 (**permalink**) 04/01/2011, 17:32

jajaja.... el aplauso es por el esfuerzo de postearlo lo mas didactico posible, ya que si te fijas esta con peras y manzanas, y no es tan facil, explicar mucho codigo a nivel de monito.-

Con respecto a la Url, ya me han hecho esa sugerencia y estoy trabajando para ello, luego se los contare, cuando ya tenga varios ejemplillos arriba para que lo visualizen.

Por el momento, si se animan es solo copiar - pegar.

y por dudas, solo me esriben, o por mejoras hay mucho aca en el foro para potenciar a sus porpias necesidades el codigo.

Como dije, por lo menos ya tienen con que defenderse cuando desen manejar imagenes.-

Saludos.-
---------------------------------------------------

phpfan · #5 (**permalink**) 04/01/2011, 18:04

-Aun asi muestra el ejemplo, es complicado animarse a hacer esto , ahora mismo estoy muy ocupado .

edgar_cln · #6 (**permalink**) 05/01/2011, 00:56

cierto un ejemplo en linea estaria bien !!

phpfan · #7 (**permalink**) 14/01/2011, 21:22

-y no lo piensa poner esto no se ni cuando lo hare sera cuando siente cabeza , que ponga enlace ya!

phpfan · #8 (**permalink**) 14/01/2011, 21:22

HAsta con imágenes me vastaria,

Triby · #9 (**permalink**) 14/01/2011, 23:01

Gracias por el aporte!