изображение не обновляется при отправке формы с помощью ajax

Question

Я работаю над проектом, где пользователи могут загрузить свое изображение профиля, поэтому я создал форму Ajax.Форма успешно отправлена, но она не обновляет новое изображение, загруженное пользователем

Это код моей формы

  <label data-toggle="tooltip" title="Your Avatar">
      <img src="../assets/img/avatar/<?= $user->avatar() ?>" class="profile-settings-avatar" id="avatar" alt="Profile Avatar" />
    <input id="avatar-file-input" type="file" name="avatar" class="form-control" style="display:none;"/>
 </label>

Это мой код ajax, я использую форму Ajaxчтобы отправить его с помощью ajax, он попытался изменить src на новый src, когда ajax завершил работу, но не работает

// Profile Settings Ajax
$(document).ready(function() { 
  let avatar = $('#avatar').attr('src');
  $('#form').ajaxForm(function(){
      avatar = $('#avatar').attr('src');
      $.notify("Your card has been updated successfully!", "success");
  }); 
}); 

Некоторая помощь приветствовалась бы

Answer 1

вы сказали, что отправляете его с помощью ajax, но я не вижу URL в параметре ajaxForm, как вы можете загрузить изображение?

это пример функции ajaxform

$("#theForm").ajaxForm({url: 'server.php', type: 'post'})

иесли вы хотите загрузить изображение, то изображение непосредственно отображается в элементе img, вы можете использовать событие onchange в файле ввода для загрузки изображения, чем получить возвращаемое значение из загружаемого изображения ajax для изменения атрибута src