javascript - 使用 jQuery PHP 将图像替换为图像后刷新图像

Question

我正在使用 simpleImage，一个 php 图像处理库。我正在尝试使用 ajax 和 replaceWith 从外部旋转图像。它会替换图像和所有内容，但旋转时不会刷新。

index.php -

//Submit Form
function subForm() {
event.preventDefault();
var name = $('#target').val();
console.log(name);
$.post("rotate.php", {name: name},
function(data) {
$("#preview").replaceWith( '<img id="replace" src="'+data+'"/>' );
});
}



<img src="'.$target.'" id="preview"/>

<form method="post" action='' id="rotateForm" data-ajax="false">
<input type="submit" id="rotate"  onclick="subForm();" value="rotate">
</form>

** 已更新**

旋转.php -

$time = time();
$newImg = $_POST['name'];
$img = new abeautifulsite\SimpleImage($newImg);
$img->rotate(90)->best_fit(500, 500)->save();
echo $newImg.'?'.$time;

图像会旋转，但不会在页面重新加载的情况下在页面上更新。我在这里使用的方法是否错误？

Answer 1

图像通常会被浏览器缓存。

问题:

1. 你显示一些带有特定 src 的图像，比如 someimage.jpg
2. 您旋转该图像并为其提供相同的 src someimage.jpg
3. 浏览器将从缓存加载旧的!

为了防止这种情况，您可以简单地使用像这样的时间戳请求一个全新的

someimage.jpg?t=1476400456961

浏览器将从服务器加载干净的someimage.jpg。

---

一个 JS 解决方案是:

function subForm() {

  event.preventDefault();

  var name = $('#target').val();
  console.log(name);

  $.post("rotate.php", {name: name}, function(data) {
    var tStamp = +new Date(); // Generate always a new timestamp milliseconds value
    $("#preview").replaceWith( '<img id="replace" src="'+ data+"?t="+ tStamp  +'"/>' );
  });
}