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
<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>";
echo "El archivo fue subido con éxito \n";
echo "Información del archivo:";
} else {
echo "El archivo no se pudo subir, información:\n";
}
echo "</pre>";
<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 .