En mi proyecto, las personas pueden incluir una fotografía personal para que se les pueda identificar fácilmente.
Lo que estoy haciendo en este momento es lo siguiente:
- Monitorear el
input
con tipofile
que tengo para que, al momento de que cambie de valor, se ejecute la acción de guardar dicha fotografia. - Utilizo la función
$.ajax()
para mandar el archivo al servidor y que de alli se procese. - El servidor devuelve el
path
en donde se almaceno la fotografía para que pueda reemplazar el valor de miimg
en donde se debe mostrar.
Ahora con un poco mas de detalle:
Todo en el numeral 1 y 2 funciona bien. Despues, para el numeral 3, tengo lo siguiente. En mi archivo de php muevo el archivo y doy una respuesta con el siguiente código (simplificado por razones obvias):
move_uploaded_file($_FILES['usuariofoto']['tmp_name'],$directorio.$nombre_img);
$full_path = $directorio.$nombre_img;
$response = array(1,$full_path);
echo json_encode($response);
Entiendo que, si no se especifica lo contrario, move_uploaded_file
sobreescribe el archivo, lo cual es bueno, ya que no quiero tener un monton de fotos para la misma persona. ($nombre_img
es un id único para cada persona y $directorio
es el nombre de la carpeta)
De regreso en JQuery, estoy intentando actualizar el img con
var response = JSON.parse(postresult);
$("#usuariovistafoto").attr("src", response[1]);
Hasta aqui todo bien, pero la imagen no cambia. Al inspeccionar el elemento img
, veo que tiene el mismo nombre que siempre, pero esto es normal, ya que estoy sobreescribiendo la fotografía. Refresco la página manualmente y, efectivamente, si se ha guardado la fotografía correctamente, ya que se despliega la nueva foto que he cargado.
Entonces, aqui esta el problema. Supongo que como el archivo tiene el mismo nombre, la imagen no se actualiza y se sigue viendo la misma fotografía, aunque, en efecto, todos los cambios si se han llevado a cabo.
¿Que tengo que hacer para que, por asi decirlo, mi img
se vuelva a "renderizar" aunque tenga el mismo nombre de archivo en el src
?