Обновить изображение после его замены С помощью 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

Изображения обычно обрабатываются браузером.

Проблема:

1. вы показать некоторые изображения с конкретным src как someimage.jpg
2. Вы поворачивания изображения и обеспечить его же srcsomeimage.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 +'"/>'); 
    }); 
} 

Answer 2

Вы переписали атрибут src вашего тега, чтобы изображение снова загружалось.