使用 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>

** 已更新**

rotate.php -

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

图像会旋转但不会在页面上更新，而不会重新加载页面。我在这里使用的方法有误吗？

Answer 1

您已重写标签的 src 属性，以便再次加载图像。

Answer 2

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

问题：

你展示了一些带有特定 src 的图片，比如 someimage.jpg
您旋转该图像并为其提供相同的 src someimage.jpg
浏览器将从缓存!

旧的

为防止出现这种情况，您只需使用像

这样的时间戳请求一个全新的

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  +'"/>' );
  });
}

使用 jQuery PHP 替换图像后刷新图像

Refresh image after its been replacedWith image using jQuery PHP

javascript

php

ajax

jquery

replacewith