使用ajax提交表单时图像不刷新答案

【问题标题】：image not refreshing when form submitted with ajax使用ajax提交表单时图像不刷新
【发布时间】：2019-09-19 04:36:11
【问题描述】：

我正在开发一个用户可以上传他们的个人资料图片的项目，因此我创建了一个 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");
  }); 
});

我们将不胜感激

【问题讨论】：

$('#avatar').attr('src'); 更新$('#avatar').attr('src',avatar);
你也可以试试dorcode.com/questions/46/picture-onupload-button

标签： php jquery ajax

【解决方案1】：

你说你用ajax提交，但是我在ajaxForm参数中没有看到url，你怎么上传图片？

这是示例 ajaxform 函数

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

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

【讨论】：

ajaxForm是jquery ajax的插件，不需要参数