jQuery를 사용하여 이미지를 바꾼 후 새로 고침 PHP

Question

저는 PHP 이미지 조작 라이브러리 인 simpleImage를 사용하고 있습니다. 아약스와 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. 는 브라우저가 구를로드 당신은 그 이미지를 회전과 같은 srcsomeimage.jpg
2. 함께 제공 특정 src
3. 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 +'"/>'); 
    }); 
} 

Answer 2

이미지가 다시로드되도록 태그의 src 속성을 다시 작성했습니다.