javascript — обновление изображения после его замены на изображение с использованием переполнения стека jQuery.

Question

javascript — обновление изображения после его замены на изображение с использованием переполнения стека jQuery.

Я использую 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;

Изображение вращается, но не обновляется на странице без перезагружаемой страницы. Я использую здесь неправильный подход?

1

ajax javascript jquery php replacewith

Решение

Другие решения

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

1

Источник

Accepted Answer

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

Эта проблема:

вы показываете какое-то изображение с определенным 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  +'"/>' );
});
}

1