Rails4上传图片后无法触发Bootstrap模态框的问题咨询

你遇到的核心问题是表单提交方式不对：当前通过onchange: 'this.form.submit()'触发的是普通同步表单提交，浏览器会直接刷新页面并加载HTML响应，根本不会触发controller里的format.js分支——因为同步请求的Accept请求头是text/html，Rails会默认走format.html的处理逻辑。

1. 把表单改成AJAX提交（关键） #

修改show.html.erb里的form_for，添加remote: true属性，让表单通过AJAX异步提交，这样请求会带上Accept: application/javascript头，Rails才会执行format.js的响应：

<%= form_for @user, html: {multipart: true}, remote: true do |f| %>
  <div class="row " id="user_avatar_crop">
    <!-- Choose Image -->
    <div class="col-md-12">
      <%= f.file_field :picture, id: :user_avatar, onchange: 'this.form.submit()'%>
    </div>
  </div>
<% end %>

注意：确保你的页面已加载jquery和jquery_ujs（Rails 4.2默认会包含在application.js里），否则remote: true不会生效。检查app/assets/javascripts/application.js是否有这两行：

//= require jquery
//= require jquery_ujs

2. 修正UserController的update方法逻辑 #

你的原controller代码有几个逻辑问题：比如flash放在redirect_to之后不会生效，还有不必要的template指定，以及分支处理不够清晰。修改后的代码如下：

def update
  @user = User.find(params[:id])
  if @user.update_attributes(user_params)
    if params[:user][:picture].present?
      # 图片上传成功，返回JS渲染裁剪模态框
      respond_to do |format|
        format.js # 默认会自动渲染app/views/users/update.js.erb，无需手动指定template
        format.html { redirect_to @user, notice: '图片上传成功，请裁剪' }
      end
    else
      # 无图片上传，普通资料更新
      redirect_to @user, notice: '资料更新成功'
    end
  else
    # 更新失败，返回错误响应
    respond_to do |format|
      format.html { render :edit }
      format.js { render json: @user.errors, status: :unprocessable_entity }
    end
  end
end

3. 验证update.js.erb的正确性 #

你的update.js.erb代码本身没问题，但要确保_modal.html.erb里的模态框ID是upload-modal（和JS里的$('#upload-modal').modal('show')对应），这点你已经做对了。

上传图片后，打开浏览器开发者工具的网络标签：

• 确认请求类型是XHR（异步请求）
• 确认响应的Content-Type是application/javascript
• 查看响应内容是否是update.js.erb渲染后的代码，此时模态框应该正常弹出

内容的提问来源于stack exchange，提问作者SylorHuang