Foros del Web » Programando para Internet » PHP »

Aporte:Manejador de Imagenes con Doble Visualizacion

Estas en el tema de Aporte:Manejador de Imagenes con Doble Visualizacion en el foro de PHP en Foros del Web. 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 (permalink)  
Antiguo 03/01/2011, 19:32
Avatar de Prais  
Fecha de Ingreso: octubre-2010
Mensajes: 114
Antigüedad: 9 años, 1 mes
Puntos: 6
Exclamación Aporte:Manejador de Imagenes con Doble Visualizacion

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
  1. <a href="javascript:Abrir_ventana('FILE/file.php?id_producto=<? echo $CaptureReg['ID_PRODUCTO'];?>')">
  2. <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 original
  1. function Abrir_ventana(pagina) {
  2. var opciones="toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, width=760, height=430, top=85, left=140";
  3. 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
  1. <html>
  2.     <head><title>Subir Foto</title>
  3. <?php include("conexion.php");// se conenctan a la base de datos.
  4. $id_producto=$_REQUEST['id_producto']; // rescata el id_producto, enviado desde el listado principal ("popup")
  5. $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
  6. $IdProducto=mysql_fetch_array($Result); ?>
  7.  
  8. <script type="text/javascript"> //funciones necesarias, para controlar la imagen antes de subir el nombre en la bd.(ancho,peso,altura)
  9.  
  10. function actuar(peso, anchura, altura) {           
  11.                 this.peso.value = peso;                     this.ancho.value = anchura;                     this.alto.value = altura;}
  12.      
  13. function ini() {
  14.     document.forms.formu.actualizar = actuar;
  15.     window.frames.ver.location.href = "previsor.php";
  16.     document.forms.formu.actualizar(0, 0, 0);}     
  17.  
  18. function validar(f){
  19.     enviar = /\.(gif|jpg|png|ico|bmp)$/i.test(f.archivo.value);
  20.     if (!enviar)    alert("seleccione imagen");
  21.     return enviar;}    
  22.  
  23. function limpiar(){
  24.     document.forms.formu.actualizar(0, 0, 0);
  25.     f = document.getElementById("archivo");
  26.     nuevoFile = document.createElement("input");
  27.     nuevoFile.id = f.id;
  28.     nuevoFile.type = "file";
  29.     nuevoFile.name = "archivo";
  30.     nuevoFile.value = "";
  31.     nuevoFile.onchange = f.onchange;
  32.     nodoPadre = f.parentNode;
  33.     nodoSiguiente = f.nextSibling;
  34.     nodoPadre.removeChild(f);
  35.     (nodoSiguiente == null) ? nodoPadre.appendChild(nuevoFile):
  36.     nodoPadre.insertBefore(nuevoFile, nodoSiguiente);} 
  37.  
  38. function checkear(f) {
  39.              function no_prever() {
  40.     alert("El fichero seleccionado no es válido...");
  41.     limpiar();}
  42.  
  43. function prever() {
  44.              
  45.     var campos = new Array("maxpeso", "maxalto", "maxancho");
  46.     for (i = 0, total = campos.length; i < total; i ++)
  47.     f.form[campos[i]].disabled = false;
  48.     actionActual = f.form.action;
  49.     targetActual = f.form.target;
  50.     f.form.action = "previsor.php";
  51.     f.form.target = "ver";
  52.     f.form.submit();
  53.     for (i = 0, total = campos.length; i < total; i ++)
  54.     f.form[campos[i]].disabled = true;
  55.     f.form.action = actionActual;
  56.     f.form.target = targetActual;}
  57.     (/\.(gif|jpg|png|ico|bmp)$/i.test(f.value)) ? prever() : no_prever();} 
  58.  
  59. function datosImagen(peso, ancho, alto, error){
  60.          function mostrar_error() {
  61.     enviar = false;                
  62.     mensaje = "Ha habido un error (error nº " + error + "):";
  63.     if (error % 2 == 1) // tipo incorrecto
  64.     mensaje += "\nel fichero no es válido";
  65.     error = parseInt(error / 2);
  66.     if (error % 2 == 1) // excede en peso
  67.     mensaje += "\nla Imagen excede el Peso (" + peso + ").";
  68.     error = parseInt(error / 2);
  69.     if (error % 2 == 1) // excede en anchura
  70.     mensaje += "\nla Imagen excede en Anchura (" + ancho + ").";
  71.     error = parseInt(error / 2);
  72.     if (error % 2 == 1) // excede en altura
  73.     mensaje += "\nla Imagen excede en Altura (" + alto + ").";
  74.     error = parseInt(error / 2);
  75.     alert (mensaje);
  76.     limpiar();}
  77.     if (error == 0)
  78.     document.forms.formu.actualizar(peso, ancho, alto);
  79.     else
  80.     mostrar_error();}      
  81.  
  82. function Cerrar() {
  83.     window.close();}
  84. </script></head>
  85.  
  86. <body onLoad="ini()" >
  87.     <table width="500" height="309" border="1">
  88. <form action="KG_imagen_I1.php" method="post" enctype="multipart/form-data" onSubmit="return validar(this)" name="formu" style="margin: auto; text-align: center;">
  89.     <tr>
  90.         <td width="200"><div align="center">Imagen Actual </div></td>
  91.         <td width="200"><div align="center">Nueva Imagen </div></td>
  92.         <td width="176"></td>
  93.   </tr>
  94.    <tr>
  95.         <td>
  96. <? 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).
  97. <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.
  98. <? } else { ?> // Si No, muestra la imagen que corresponde y le entrego su id_producto
  99. <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.
  100.     ? } ?>
  101.     </td>
  102.      <td>
  103. <iframe src="previsor.php" id="ver" name="ver" style="display: block; margin: auto; border-width: 2px; width: 284px; height: 330px;"></iframe>
  104. </td>
  105.     <td><fieldset style="width: 93%"><legend>Límites aceptados</legend>
  106.     peso máximo:
  107.     <input type="text" disabled name="maxpeso" value="80000" />
  108. <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
  109.     anchura máxima:
  110.     <input type="text" disabled name="maxancho" value="640" />
  111.     altura máxima:
  112.     <input type="text" disabled name="maxalto" value="480" />
  113. </fieldset><br><br><fieldset style="width: 93%"><legend>Valores actuales</legend>
  114.     peso actual:
  115.     <input type="text" readonly name="peso" id="peso" value="0" />
  116.     anchura actual:
  117.     <input type="text" readonly name="ancho" id="ancho" value="0" />
  118.     altura actual:
  119.     <input type="text" readonly name="alto" id="alto" value="0" />
  120.     </fieldset></td>
  121.     </tr>
  122.      <tr>
  123.         <td>
  124. <div align="center"><input type="file" name="archivo" id="archivo" style="cursor:pointer" onchange="checkear(this)"style="width: 80%"/></div>
  125.     </td>
  126.         <td>
  127. <div align="center"><input type="submit" class="button" style="cursor:pointer" value="Guardar Cambios"/></div>
  128.         </td>
  129.          <td>
  130. <div align="center"><input type="button" onClick="Cerrar();" style="cursor:pointer" value="Cancelar"/></div>
  131.         </td>
  132.     </tr>
  133.         </form>
  134.     </table>
  135. </body>
  136. </html>

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

Código PHP:
Ver original
  1. <?php session_start(); include("conexion.php");//conexion a la bd
  2.  
  3. $id_producto=$_REQUEST['id_producto']; //rescato el id_producto,enviado de file.php.-
  4. $filenombre = $_FILES['archivo']['name']; // asigno nombre del archivo, para entregarselo al update.-
  5. $uploaddir = $_SERVER['DOCUMENT_ROOT'].'/proyecto/images_inventario/';  //ruta de almacenamiento.-
  6. $uploadfile = $uploaddir. $_FILES['archivo']['name']; //asigna al archivo el directorio.-
  7. $uploadcheck = $uploadfile;
  8.  
  9. //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'.-
  10. if(empty($_FILES['archivo']['name'])){$uploadfile = "";}
  11.         mysql_query("update lk_inv_producto set DE_IMAGEN='$filenombre' where ID_PRODUCTO='$id_producto'",$cn) or die(mysql_error());
  12.        
  13. echo "<pre>";
  14. if (move_uploaded_file($_FILES['archivo']['tmp_name'], $uploadfile)) {
  15. echo "El archivo fue subido con éxito \n";
  16. echo "Información del archivo:";
  17. print_r($_FILES);
  18. } else {
  19. echo "El archivo no se pudo subir, información:\n";
  20. print_r($_FILES);
  21. }
  22. echo "</pre>";
  23. mysql_close($cn);?>
  24. <script>
  25. 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".
  26. </script>

Los otros 2 archivos a continuacion ya que voy a exeder el maximo de caracteres .
  #2 (permalink)  
Antiguo 03/01/2011, 19:32
Avatar de Prais  
Fecha de Ingreso: octubre-2010
Mensajes: 114
Antigüedad: 9 años, 1 mes
Puntos: 6
Exclamación Respuesta: Aporte:Manejador de Imagenes con Doble Visualizacion

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
  1. <?php session_start(); include("conexion.php");
  2.  
  3.     $defecto = "KG_00_SinFotoProducto.png";
  4.     $Ok = isset($_FILES["archivo"]);
  5.     $url = ($Ok) ? $_FILES["archivo"]["tmp_name"] : $defecto;
  6.     list($anchura, $altura, $tipoImagen, $atributos) = getimagesize($url);
  7.     $error = (isset($atributos)) ? 0 : 1;
  8.     $los_tipos = array("gif", "jpg", "png");
  9.     $tipo = ($Ok) ? "image/".$los_tipos[$tipoImagen - 1] : "image/png";
  10.     $fichero = ($Ok && ($error == 0)) ? $_FILES["archivo"]["name"] : $defecto;
  11.     $tam = filesize($url);
  12.     $OkTam = isset($_POST["maxpeso"]);
  13.     $OkAncho = isset($_POST["maxancho"]);
  14.     $OkAlto = isset($_POST["maxalto"]);
  15.     $maxTam = ($OkTam) ? (int) $_POST["maxpeso"]: 100000;
  16.     $maxAncho = ($OkAncho) ? (int) $_POST["maxancho"]: 640;
  17.     $maxAlto = ($OkAlto) ? (int) $_POST["maxalto"]: 480;
  18.     $error += ($tam <= $maxTam) ? 0 : 2;
  19.     $ancho = ($error == 1) ? 0 : $anchura;
  20.     $alto = ($error == 1) ? 0 : $altura;
  21.     $error += ($ancho <= $maxAncho) ? 0 : 4;
  22.     $error += ($alto <= $maxAlto) ? 0 : 8;
  23.     $datos = ($error == 0) ? $url : $defecto;
  24.     $onload = ($Ok) ? "onload='parent.datosImagen($tam, $ancho, $alto, $error)'": '';
  25.     $datos_imagen = fread(fopen($datos, "rb"), filesize($datos));
  26.     $_SESSION["cont"] = $datos_imagen;
  27.     $_SESSION["tipo"] = ($error == 0) ? $tipo : "image/png";?>
  28. <html>
  29.      <head>
  30.      <style type="text/css" >
  31.     html    {height: 100%;}
  32.     body    {height: 100%;
  33.     overflow: hidden;
  34.     background-color: #eeeeee;
  35.     background-image: url(previendo.php?dato=<?=$fichero;?>);
  36.     background-repeat: no-repeat;
  37.     background-position: center center;}
  38.     </style>
  39.     </head>
  40. <body <?=$onload;?>></body>
  41. </html>

Y por ultimo el previendo.php:

Código PHP:
Ver original
  1. <?php session_start();
  2. $url = ($_SESSION["cont"] == "")
  3. ? fread(fopen("KG_00_SinFotoProducto.png", "rb"), filesize("KG_00_SinFotoProducto.png"))
  4. : $_SESSION["cont"];
  5. $tip = ($_SESSION["tipo"] == "")
  6. ? "image/png"
  7. : $_SESSION["tipo"];
  8. header("Content-type: $tip");
  9. echo $url;

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.-
  #3 (permalink)  
Antiguo 03/01/2011, 19:43
(Desactivado)
 
Fecha de Ingreso: noviembre-2010
Ubicación: Malaga
Mensajes: 225
Antigüedad: 9 años
Puntos: 0
Respuesta: Aporte:Manejador de Imagenes con Doble Visualizacion

-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.
  #4 (permalink)  
Antiguo 04/01/2011, 17:32
Avatar de Prais  
Fecha de Ingreso: octubre-2010
Mensajes: 114
Antigüedad: 9 años, 1 mes
Puntos: 6
Exclamación Respuesta: Aporte:Manejador de Imagenes con Doble Visualizacion

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.-
---------------------------------------------------
  #5 (permalink)  
Antiguo 04/01/2011, 18:04
(Desactivado)
 
Fecha de Ingreso: noviembre-2010
Ubicación: Malaga
Mensajes: 225
Antigüedad: 9 años
Puntos: 0
Respuesta: Aporte:Manejador de Imagenes con Doble Visualizacion

-Aun asi muestra el ejemplo, es complicado animarse a hacer esto , ahora mismo estoy muy ocupado .
  #6 (permalink)  
Antiguo 05/01/2011, 00:56
Avatar de edgar_cln  
Fecha de Ingreso: agosto-2010
Ubicación: Sierra Sinaloense
Mensajes: 122
Antigüedad: 9 años, 4 meses
Puntos: 4
Respuesta: Aporte:Manejador de Imagenes con Doble Visualizacion

cierto un ejemplo en linea estaria bien !!
  #7 (permalink)  
Antiguo 14/01/2011, 21:22
(Desactivado)
 
Fecha de Ingreso: noviembre-2010
Ubicación: Malaga
Mensajes: 225
Antigüedad: 9 años
Puntos: 0
Respuesta: Aporte:Manejador de Imagenes con Doble Visualizacion

-y no lo piensa poner esto no se ni cuando lo hare sera cuando siente cabeza , que ponga enlace ya!
  #8 (permalink)  
Antiguo 14/01/2011, 21:22
(Desactivado)
 
Fecha de Ingreso: noviembre-2010
Ubicación: Malaga
Mensajes: 225
Antigüedad: 9 años
Puntos: 0
Respuesta: Aporte:Manejador de Imagenes con Doble Visualizacion

HAsta con imágenes me vastaria,
  #9 (permalink)  
Antiguo 14/01/2011, 23:01
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.975
Antigüedad: 11 años, 3 meses
Puntos: 2190
Respuesta: Aporte:Manejador de Imagenes con Doble Visualizacion

Gracias por el aporte!
__________________
- León, Guanajuato
- GV-Foto

Etiquetas: doble, imagenes, visualizacion
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:47.