Как реализовать полный ajax для загрузки и отображение картинки. Jquery

Простой код для загрузки картинок на сайте с помощью ajax и моментального её отображения. Для первой заливки картинки работает, но если необходимо обновить эту картинку залив новую, то она отобразиться только после полной перезагрузки страницы (ctr+f5) Как можно организовать "полный ajax" в этом коде?

HTML

<form action="handler.php" method="post" enctype="multipart/form-data">
   <input type="file" name="file">
   <input type="submit">
</form>
<img id="img" src="img/img.jpg" alt="">
<script src="js/jquery-3.6.1.min.js"></script>
<script src="js/script.js"></script>

Js/Jquery

$(document).ready(function() {
$('form').submit(function(event) {
  event.preventDefault();
    {
      $.ajax({
        type: $(this).attr('method'),
        url: $(this).attr('action'),
        data: new FormData(this),
        contentType: false,
        cache: false,
        processData: false,
        success: function(result) {

            $('#img').attr('src', 'img/img.jpg');

            },
        });
    }

});
});

PHP

<?php
    move_uploaded_file($_FILES['file']['tmp_name'], 'img/img.jpg');
?>

Ответы (1 шт):

Автор решения: Егор Банин

Вероятно браузер не перезагружает картинку, если её src не поменялся. Это логично, ведь если уже загрузили img/img.jpg, то зачем что-то ещё делать?

Можно добавить в url картинки параметр, который заставит браузер перезагрузить её.

$('#img').attr('src', 'img/img.jpg?' + Date.now());

Думаю, после этого наступит полный ajax этого кода :-)

→ Ссылка