1

Buen dia a todos.

Tengo un formulario en mi vista que envia una imagen a un archivo PHP aparte al hacer submit, en este archivo tomo la ubicación temporal de mi imagen y la muevo a una carpeta especifica de mi servidor local (la img con un nombre predefinido para que cuando cambien la imagen tenga el mismo nombre y sobreescriba la anterior) , luego estoy registrando la url en mi base de datos y con un header vuelvo al formulario de la vista donde estoy mostrando la imagen recien subida ... HASTA AQUI TODO FUNCIONA BIEN.

El problema es cuando modifican esa misma imagen, el cambio de imagen no se refleja y sigue mostrando la versión anterior de la imagén. Este problema ocurre en algunas ocasiones (no siempre) y cuando ocurre se arregla al recargar la página con (ctrl+ f5), necesito que esto quede automatico y el usuario no tenga ese problema pero no se como :(

Aqui el formulario y como muestro la imagen:

    <div class="border container" >
        <form action="../templates/publicidadEvento.php?id=<?php echo $_GET["id"];?>" method="POST" enctype="multipart/form-data">
            <label>MODIFICAR PUBLICIDAD</label><BR>
            afiche del evento:
            <input type="file" name="afiche"><br>
            programa del evento:
            <input type="file" name="programa"><br>
            <input type="submit" name="modificarPublicidad" value="Modificar">
        </form>
    </div>
</div>  

<div class="row">
    <div class="border col-4">
        <H3>AFICHE:</H3>         
        <img src="../../<?php echo $miEvento["afiche"];?>" height="300" width="200">
    </div> 

Asi es como recibo la imagen del formulario:

if(isset($_POST["modificarPublicidad"])){
include($_SERVER["DOCUMENT_ROOT"]."/EVENTOS/resources/clases/Evento.php");

if($_FILES["afiche"]["name"]!=null){ //si envia solo el afiche
    
    $tempAfiche=$_FILES["afiche"]["tmp_name"];
    echo "afiche recibido<br> $tempAfiche";
    Evento::modificarAfiche($idE,$tempAfiche);
}
if($_FILES["programa"]["name"]!=null){ //si envia solo el programa
    echo "programa recibido<br>";
    $tempPrograma=$_FILES["programa"]["tmp_name"];
    Evento::modificarPrograma($idE,$tempPrograma);
}

header("Location:../vistas/vistaEventoPublicidad.php?id=".$idE);

}

Este es el método estático de mi clase Evento:

static function modificarAfiche($idEvento, $rutaTemp){
    $carpetaDestino=$_SERVER["DOCUMENT_ROOT"]."/EVENTOS/publicidad/".$idEvento."/";
    if(!file_exists($carpetaDestino)){
        mkdir($carpetaDestino,0777);
    }
    $nombreAfiche="afiche".$idEvento.".jpg";
    $rutaAfiche=$carpetaDestino.$nombreAfiche;
    move_uploaded_file($rutaTemp,$rutaAfiche);

    $rutaRelativa="publicidad/".$idEvento."/".$nombreAfiche;
    $mysqli=conectar();
    
    $sentencia=$mysqli->prepare("UPDATE eventos SET afiche=? WHERE id_evento=?");
    $sentencia->bind_param("si",$rutaRelativa,$idEvento);
    $sentencia->execute();
}
3
  • ¿Y no es un problema de cache del navegador? ¿Has verificado que la imagen es la correcta en la ruta en la que teoricamente se ha sobreescrito? Para recargar la página con el navegador y que no tenga en cuenta la cache prueba manteniendo pulsada la tecla Shift mientras le das al botón de recargar de tu navegador, al lado de la url.
    – masterguru
    Commented el 14 mar. 2022 a las 21:50
  • Tal como lo cuentas tiene toda la pinta de ser un problema de cache. Lo que puedes hacer es renombrarla siempre agregandole alguna coletilla única, para que siempre cargen la correcta, o bien forzar que las imagenes no se guarden en cache mediante el .htaccess, pero eso no es aconsejable, más que nada porque ralentizarás la carga de la página al tener que recargar siempre todas las imágenes, y le darás mas trabajo al servidor tambien.
    – masterguru
    Commented el 14 mar. 2022 a las 21:56
  • O quizas podrias agregar la coletilla al src del elemento img, más o menos de este modo: src="../../<?php echo $miEvento["afiche"];?>?version=x" donde x sea un número que no se repita cada vez que la actualices (no estoy seguro de si funcionaria, con los css y los js si que funciona, pero con las img no estoy tan seguro)
    – masterguru
    Commented el 14 mar. 2022 a las 22:00

2 respuestas 2

2

Solución rápida para salir del apuro

Si es muy urgente, puedes añadir a la URL de la imagen una query aleatoria, por ejemplo, añadiéndole una instantánea de tiempo.

"http://domain.com/img.png?t=" . time();

El navegador siempre interpretará la imagen como distinta, es decir, inhabilitas la cache. Pero créeme que en realidad no quieres esto en tu sistema, la cache está precisamente para ahorrar muchos recursos de red y tiempos de carga, aprovéchala.

Solución más adecuada

Una nueva imagen siempre tendría que tener un nombre de recurso distinto o un código de versión permanente. Cuando guardes una imagen lo ideal es que esta incluya algún tipo de hash aleatorio. Es decir, que el nombre de la imagen sea algo que cambie cada vez que se actualice dicha imagen en el servidor, pero mientras sea la misma lo mantenga. Esta es la razón por la que muchas imágenes que te descargas de algún gestor de contenidos se llama algo del estilo grfudih4564gwasd213.png. Echa un ojo a la función hash.

Lo que yo haría es que si se sube una imagen llamada mi_imagen.png, el resultado sea mi_imagen_"hash".png, algo como mi_imagen_wfuih237w.png. También puedes usar time() en lugar de un hash en realidad, lo importante es que de verdad la imagen se llame distinta de forma permanente.

Algunos sistemas, para no alterar el nombre de la imagen, junto a la información de la imagen también guardan un código de versión o hash que luego sí incluyen como una query en la URL. Este código solo cambia en la base de datos cuando se actualiza la imagen. Es lo mismo, solo que en lugar de alterar el nombre de la imagen, alteras un campo adicional asociado a la imagen en la base de datos que luego concatenas a la url, por ej: (../mi_imagen.png?v=21). Existen muchas otras opciones, estoy seguro.

Soluciones futuras

Existen formas de controlar las cabeceras HTTP para indicar a los navegadores que deben actualizar su cache, bien entera o bien para determinados recursos, pero dado que todavía no tiene demasiada compatibilidad no deberías ni molestarte.

0

Verifica que esté la imagen en el servidor, y que las rutas sean las mismas a la imagen. Si no, pues te recomiendo que limpies cache de navegador. Respondí aquí algo parecido a la cache por si lo quieres ver: https://es.stackoverflow.com/a/520544/274823

1
  • 1
    Esta es una buena solución inicial para salir del paso en lo que se encuentra alguna forma para configurar el sistema para generar nombres dinámicos durante creación del recurso. El problema de esta opción que indicas es precisamente que pierdes todas las ventajas de la cache. Es especialmente útil durante desarrollo, eso sí, por ejemplo para los casos que propones (recursos como .css, .js, etc), pero no para controlar el comportamiento de cache de imágenes (que pueden cambiar cada mucho tiempo o simplemente nunca). Un saludo.
    – UXK
    Commented el 14 mar. 2022 a las 22:12

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.