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替换后使用图像刷新图像

2 个答案: