Question

提前道歉。我刚开始使用异步调用，而且我一直在努力解决这个问题。我想更新用户头像图像，而不必在将图像保存到用户模型后刷新页面。

<form class="edit_user" id="edit_user_<%= current_user.id %>" enctype="multipart/form-data"
  action="/users/<%= current_user.id %>" accept-charset="UTF-8" data-remote="true" method="post">
  <input name="utf8" type="hidden" value="&#x2713;" />
  <input type="hidden" name="_method" value="patch" />
  <input name="authenticity_token" value="<%= form_authenticity_token %>" 
    type="hidden">
  <div id="upload-wrap">
    <input id="user-avatar" type="file" name="user[avatar]" />
  </div>
</form>

// controller 
def update
  @user = current_user
  user_params = params.require(:user).permit(:latitude, :longitude, :avatar)
  if @user.update_attributes(user_params) && params[:user].include?('avatar')
    render json: @user.avatar.to_json
  end
end

目前，图像保存，我只是将图像链接吐出到屏幕上作为json。如何将此信息发送回视图，以便我可以在不刷新整页的情况下进行渲染？

P.S。 - 尝试使用$ .ajax执行此操作，但控制器中的params中没有img文件。

以下是我从控制器回来的内容：

{
  "url": 
    "https://gametiks.s3.amazonaws.com/uploads/user/avatar/4/turkey.jpg",
  "square": {
    "url": "https://gametiks.s3.amazonaws.com/uploads/user/avatar/4/square_turkey.jpg"
  }
}

我用ajax的原始实现：

var avatarForm = document.getElementById(`edit_user_${userId}`);

$(avatarForm).change(function() {
  avatarForm.submit();
});

$(avatarForm).submit(function(event){
  event.preventDefault();
  $.ajax({
    url: $(this).attr('action'),
    data: $(this).serialize(),
    type: "POST"
  });
});

更新的dom元素：

<%= @user.avatar.present? ? image_tag(@user.avatar.url(:square), id: 'avatar-img') : image_tag("https://s3.amazonaws.com/gametiks/users/avatars/Gametiks_Gamercard.jpg") %>

使用form_for @user而不指定'remote'，我将其作为参数（缺少文件）：

<ActionController::Parameters {"utf8"=>"✓", "_method"=>"patch", "authenticity_token"=>"gtFR2C8zlmQhIDqNcecSp02kW+OPf9FehMDKW9KpQ79IsSwuTIXE8wjSHFTXy+oQP2n3b9Xpo5T/vg5+2+imLA==", "controller"=>"users", "action"=>"update", "id"=>"4"} permitted: false>

无页面刷新无法更新头像img（rails，jquery）

0 个答案: