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
viewImg
?