Home / Questions / 99833
Accepted
Kenny Barrera
Asked: 2020-09-05 13:28:01 +0800 CST 2020-09-05 13:28:01 +0800 CST

How to update an image with JQuery if the file name is the same?

  • 772

In my project, people can include a personal photo so they can be easily identified.

What I am doing at the moment is the following:

  1. Monitor the inputwith type filethat I have so that, when it changes value, the action of saving said photograph is executed.
  2. I use the function $.ajax()to send the file to the server and from there it is processed.
  3. The server returns the pathwhere the photo was stored so you can replace the value of my imgwhere it should be displayed.

Now in a little more detail:

Everything in numeral 1 and 2 works fine. Then, for number 3, I have the following. In my php file I move the file and give a response with the following code (simplified for obvious reasons):

move_uploaded_file($_FILES['usuariofoto']['tmp_name'],$directorio.$nombre_img);
$full_path = $directorio.$nombre_img;
$response = array(1,$full_path);
echo json_encode($response);

I understand that, if not specified otherwise, it move_uploaded_fileoverwrites the file, which is good, since I don't want to have a bunch of photos for the same person. ( $nombre_imgit is a unique id for each person and $directorioit is the name of the folder)

Back in JQuery, I'm trying to update the img with

var response = JSON.parse(postresult);    
$("#usuariovistafoto").attr("src", response[1]);

So far so good, but the image does not change. When I inspect the element img, I see that it has the same name as always, but this is normal, since I am overwriting the photo. I refresh the page manually and, indeed, if the photograph has been saved correctly, the new photo I have uploaded is displayed.

So, here is the problem. I suppose that since the file has the same name, the image is not updated and you still see the same photograph, although, in effect, all the changes have been carried out.

What do I have to do so that, so to speak, my img"render" again even though it has the same file name in the src?

jquery

2 Answers

  1. Best Answer

    That happens because the image will be in the cache.

    You could add a ?ver=1234at the end, example:

    $(function(){
    
    let timestamp = Math.floor( Date.now() );
    console.log('Antes del ajax: ' + $('img').attr('src') );
    
    // Ajax
    setTimeout(function(){
        
        $('img').attr('src', 'https://placeimg.com/640/480?ver=' + timestamp);
        console.log('Después del ajax: ' + $('img').attr('src') );
    }, 2500);   
});
    <img src="https://placeimg.com/640/480">
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

    This way you avoid that the image with the same name is cached at the moment of receiving it.

    • 1

  2. This example with ajax, the loadImagenesAll() function generates the rows of a table with the necessary images and after calling the editImagen() function I only call loadImagenesAll() again to render the images, it is worth mentioning that I have the images in a longblob field in the db, I hope it works for you.

    var cargarImagenesAll = function () {
  $.ajax({
	  type: "POST",
	  data: array,
	  url: 'assets/php/functions.php',
	  success: function (data) {
	  var res = jQuery.parseJSON(data);
	  var mae,id_imagen;
	  var filas = "";

	  if (res.length > 0) {
		  $("#imgconttabla").empty();
		  var timestamp;
					
		  for (var i = 0; i < res.length; i++) {
			  mae = res[i];
                          id_imagen = mae.id_imagen;
			  timestamp = (Math.floor( Date.now() )+i);

                          //en caso de que sea una imagen desde un directorio o url
                          //<img src='img/imagen1.jpg?ver=" + "+timestamp+"'/>
			  filas = filas + "<tr id='" + id_imagen + "'><td><img src='assets/php/imagen.php?id=" + id_imagen + "&ver="+timestamp+"'/></td></tr>";
		  }
		  $("#imgconttabla").append(filas);

	   }else{ ...(codigo aqui) }
   },error: function (e) { }
  });
};

    • 0