イメージがjQueryを使用して置き換えられた後イメージを更新しました

Question

私はPHPイメージ操作ライブラリsimpleImageを使用しています。私は、イメージを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> 

** UPDATED **

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

通常、画像はブラウザによってキャッシュされます。

問題：

1. あなたはブラウザが古いをロードしますあなたは、その画像を回転させると同じsrcsomeimage.jpg
2. でそれを提供し、特定のsrc
3. someimage.jpgのようにして、いくつかの画像を表示します1キャッシュ！あなたは、単に

   someimage.jpg?t=1476400456961 
   

   のようにタイムスタンプを使用して新しいものを要求することができるし、ブラウザがサーバーからクリーンsomeimage.jpgをロードすることを防止するために

。

---

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

Answer 2

イメージが再度読み込まれるように、タグのsrc属性を書き換えました。