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

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

1 个答案: