Как реализовать полный 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 этого кода :-)