使用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，当ajax完成时，它试图用新的src修改src，但不起作用

// 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提交的，但我在ajaxForm参数里看不到网址，你怎么上传图片？

这是ajaxform函数示例

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

如果你想上传图片，然后图片直接显示在img元素中，你可以使用输入类型文件中的onchange事件来上传图片，而不是从上传图片ajax中获取返回值来更改属性src