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

如果文件名相同，如何使用 JQuery 更新图像？

  • 772

在我的项目中，人们可以包含个人照片，以便轻松识别。

我目前正在做的事情如下：

  1. 监视我拥有的inputwith 类型file，以便在它更改值时执行保存所述照片的操作。
  2. 我使用该函数$.ajax()将文件发送到服务器并从那里进行处理。
  3. 服务器返回path照片的存储位置，因此您可以替换 my imgwhere 它应该显示的值。

现在更详细一点：

数字 1 和 2 中的所有内容都可以正常工作。然后，对于 3 号，我有以下内容。在我的 php 文件中，我移动文件并使用以下代码给出响应（出于显而易见的原因进行了简化）：

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

我知道，如果没有另外指定，它会move_uploaded_file覆盖文件，这很好，因为我不想为同一个人提供一堆照片。（$nombre_img它是每个人的唯一 ID，$directorio它是文件夹的名称）

回到 JQuery，我正在尝试用

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

到目前为止一切都很好，但图像没有改变。当我检查 elementimg时，我发现它与往常一样具有相同的名称，但这是正常的，因为我正在覆盖照片。我手动刷新页面，确实，如果照片已正确保存，则会显示我上传的新照片。

所以，这就是问题所在。我想由于文件具有相同的名称，因此图像没有更新，您仍然看到同一张照片，尽管实际上所有更改都已执行。

我该怎么做才能让我的img“渲染”再次出现，即使它在src?

jquery

2 Answers

  1. Best Answer

    发生这种情况是因为图像将在缓存中。

    您可以?ver=1234在末尾添加一个，例如：

    $(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>

    这样可以避免同名图片在接收时被缓存。

    • 1

  2. 这个使用 ajax 的示例，loadImagenesAll() 函数生成带有必要图像的表的行，在调用 editImagen() 函数后，我只再次调用 loadImagenesAll() 来渲染图像，值得一提的是，我有图像数据库中的一个 longblob 字段，我希望它对你有用。

    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