1

Tengo el siguiente problema, es una pagina donde los productos tienen una imagen, quiero cambiar la imagen reemplazandola en la carpeta de origen, eso me funciona lo que no me funciona es como actualizar la nueva imagen (que tiene el mismo nombre y esta en la misma carpeta osea que fue reemplazada) sin recargar la pagina

Codigo de la imagen:

<a href="#" id="editImg">Cambiar imagen</a>
<label>Codigo:</label><span id="viewCodigo">PROD001</span>
<img src="images/PROD001.jpg" id="viewImg">

Modal para cambiar imagen esta con jquery-ui:

<div id="mdlEditImg" title="Cambiar imagen" style="display:none;">
    <form action="" role="form" enctype="multipart/form-data" id="formEditImg" name="formEditImg">
        <label for="editImagen">Elegir imagen:</label><br>
        <input type="file" name="editImagen" id="editImagen" class="archivo" accept="image/jpeg, .jpg, .png" style=""><br>
        <input type="submit" name="editar" id="submitEditImg" value="Cambiar imagen">
        <a href="#" id="editclose">Cancelar</a>
    </form>
</div>

Codigo jquery:

$('#mdlEditImg').dialog({
    autoOpen: false,
    modal: true,
    width: 450,
    height: 'auto',
    resizable: false,
    close: function(){
        $('#editImagen').val("");
    }
});
$('#formEditImg').submit(function(e){
    var image = $('#editImagen')[0].files[0];
    var imageName = image.name;
    var exten = imageName.substring(imageName.lastIndexOf('.') + 1);
    var datos = new FormData(document.getElementById('formEditImg'));
    datos.append("accion", "cambiarImg");
    datos.append("exten", exten);
    datos.append("codigo", $('#viewCodigo').text());
    $.ajax({
        type: "POST",
        url: "productos-ajax.php",
        data: datos,
        cache: false,
        contentType: false,
        processData: false,
        dataType: "html",
        beforeSend: function(){
        },
        error: function(){
            alert("Error en el servidor");
        },
        success: function(data){
            if (data == "true") {
                alert("Imagen cambiada correctamente!");
            } else {
                alert("Error al cambiar la imagen");
            }
        }
    });
    e.preventDefault();
});

Codigo php que reemplaza la imagen:

if ($_POST['accion'] == "cambiarImg") {
    $result = "";
    $carpeta = "images/";

    if (is_dir($carpeta)) {
        #Reemplazamos la imagen anterior pero con el mismo nombre que viene a ser el codigo del producto
        if (!move_uploaded_file($_FILES['editImagen']['tmp_name'], $carpeta.$_POST['codigo'].".".$exten)){
            $result = "Ocurrió algún error al subir el fichero. No pudo guardarse.";
        } else {
            $result = "true";
        }
    } else {
        $result = "no existe la carpeta";
    }

    echo $result;
}

Lo que quiero es que se actualice la nueva imagen que reemplaze sin tener que recargar la pagina por que el cambio surge despues de actualizar la pagina, gracias de antemano y espero que me hayan entendido. :P

3
  • Hola, dejame ver si entiendo, se supone que hay un producto con su imagen y todo, cuando haya que actualizar la imagen , quieres cambiarla en el navegador una vez que ya esta el cambio en el servidor. y despues le va dar el usuario click en enviar y el cambio ya va a quedar aplicado?, es simular que se cambia, mientras no le dan al boton enviar?
    – Luis
    el 9 mar. 2017 a las 4:45
  • Hola @Crisdu. Bienvenido a Stack Overflow en español. No me queda claro en qué lugar recibe el nombre de la nueva imagen. Pero, tu pregunta no sería simplemente cómo cambiarle el src a viewImg?
    – Mariano
    el 9 mar. 2017 a las 7:46
  • en la carpeta imagenes hay una imagen producto001.jpg que tiene la imagen de una manzana, pues quiero cambiarla por la imagen de una pera pero con el mismo nombre producto001.jpg, la cuestion es que si se cambia en el servidor pero para ver los cambios tengo que actualizar la pagina, lo que quiero es que el resultado se vea sin tener que actualizar la pagina el 14 mar. 2017 a las 16:52

2 respuestas 2

1

Extendiendo la respuesta de @A.Cedano, una vez que se obtiene el success desde el backend:

success: function(data){
   var imgPath="images/"+data.nombrenuevorecibidoendata;
   $('#viewImg img').attr("src", imgPath);
   alert("Imagen cambiada correctamente!");
}

Si el nombre del archivo de imagen se mantiene (por ejemplo, debido a que se construye determinísticamente con el slug del producto, o con su ID) el modificar el atributo src mediante

$('#viewImg img').attr("src", imgPath);

Probablemente no generaría un refresco en la imagen, cuya ruta ya estará en el caché del navegador.

Para evitar ese efecto, se puede añadir un sufijo aleatorio (separado por un signo de interrogación) cuyo efecto es inofensivo para traerse la imagen, y cumple con convencer al browser de que debe solicitar su contenido al servidor y no a su caché.

Por ejemplo, se puede usar Date.now() para obtener una marca de tiempo y poner:

success: function(data){
   var imgPath="images/"+data.nombrenuevorecibidoendata+"?"+Date.now();
   $('#viewImg img').attr("src", imgPath);
   alert("Imagen cambiada correctamente!");
}
1
0

Eso se hace en el jQuery.

Si el POST que haces hacia el archivo productos-ajax.php tiene éxito (success) entre las cosas que dicho PHP devuelve debes incluir el nombre de la nueva imagen, success lo recibe en la variable data. Entonces puedes tomarlo de data y cambiar el atributo src (imagesource) usando el id que le has dado a la imagen en el HTML, es decir viewImg:

   success: function(data){
            //Para trabajar con variables...
            var imgPath="images/"+data.nombrenuevorecibidoendata;
            $('#viewImg img').attr("src", imgPath);
            alert("Imagen cambiada correctamente!");

La lógica funciona así: A través de jQuery envías datos al servidor (POST) y jQuery recupera lo que el servidor responde en la variable data de la función del success, (success: function(data){...

atención:

  1. en data habrá todo lo que diga el php (echo, return, print_r...) normalmente el php al que se hace POST es configurado para que devuelva un array, de ese modo se pueden leer los valores con más facilidad. No es necesario evaluar data == "true" dentro del success
  2. El archivo PHP que usas en el jQuery es un archivo auxiliar, no el mismo de la página desde la cual envías la petición a jQuery. Esto es lo que permite que la página actual se actualice sin tener que cargarla de nuevo.
7
  • Ojo que si devuelve un objeto (con el nuevo nombre), la condición de if (data == "true") dejaría de aplicar
    – Mariano
    el 9 mar. 2017 a las 7:44
  • Y si la convención del usuario es usar el mismo nombre, el src sería el mismo nombre más un sufijo "cache busting" que impida mostrar la misma imagen por efecto del caché.
    – ffflabs
    el 9 mar. 2017 a las 11:29
  • amigo @Mariano ese "if" lo uso para otras cosas, la idea es que la imagen que se cambie tenga el mismo nombre de la enterior, no se si me dejo entender el 14 mar. 2017 a las 17:15
  • amigo @amenadiel ese es el problema, que la imagen cargada en el navegador esta en caché y si tu "reemplazas" la imagen con el mismo nombre por otra la imagen nueva no se actualiza hasta que actualice la pagina, buscare informacion sobre el "caché busting" y si no me funciona volvere por aca, muchas gracias y saludos a todos el 14 mar. 2017 a las 17:21
  • 1
    Le pones un sufijo random separado por ?. Por ejemplo imagen.png?123456
    – ffflabs
    el 14 mar. 2017 a las 17:32

Tu Respuesta

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

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