Rails Rails4 + Carrierwave + Jcrop + Bootstrap-Modal 怎么在上传图片后,跳转到 modal 裁剪图片?

Sylor-huang · 2018年05月18日 · 最后由 liukun_lk 回复于 2018年05月19日 · 199 次阅读

1、我用的是

Rails4+Carrierwave+Jcrop+Bootstrap-Modal 

2、当我试着按

https://www.driftingruby.com/episodes/cropping-images-with-jcrop
```  这个案例做图片上传并裁剪,可以按要求完成。相关的代码为:


users_controller.rb:


```erb
def create
    @user = User.new(user_params)
    if @user.save
      if params[:user][:avatar].present?
        render :crop
      else
        redirect_to @user, notice: "Successfully created user."
      end
    else
      render :new
    end
  end

  def update
    @user = User.find(params[:id])
    if @user.update_attributes(user_params)
      if params[:user][:avatar].present?
        render :crop
      else
        redirect_to @user, notice: "Successfully updated user."
      end
    else
      render :new
    end
  end

...

    def user_params
      params.require(:user).permit(:name, :avatar, :crop_x, :crop_y, :crop_w, :crop_h)
    end

这个方法是在图片上传完成后,然后跳转到crop.html.erb页面来进行裁剪图片。现在,我需要的是怎么能在图片上传完成后,打开bootstrap-modal来裁剪图片?这个问题困扰了我好几天,在stackoverflow上也没能得到答案。我是Rails初学者,所以非常感谢大家能帮我解答。 stackoverflow上有类似的问题,但是好像也没能解答: https://stackoverflow.com/questions/21027034/rails-carrierwave-jcrop-bootstrap

共收到 5 条回复

打开modal的时候AJAX请求取到图片显示?

@liukun_lk 谢谢你的关注,但是怎么打开modal呢?我后来看了别人的代码,做了修改。如下:

def update
    @user = User.find(params[:id])
    if @user.update_attributes(user_params)
      if params[:user][:picture].present?
        respond_to do |format|
          format.html do
            flash[:warning] = "Template missing"
            redirect_to @user
          end
          format.js { render template: 'users/update.js.erb'}
        end
      else
        redirect_to @user
        flash[:success] = "更新成功"
      end
    else
      render :edit
    end
  end

update.js.erb 内容为:

$('#uploadModalContent').html("<%= j render "users/modal"%>");
$('#upload-modal').modal('show');

show.html.erb 内容为:

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

<!-- Modal -->
<div id="uploadModalContent">

</div>

<!-- 展示用户更新后的图片 -->
<% if @user.picture? %>
  <%= image_tag @user.picture.url(:thumb), :alt => @user.name+"_avatar" %>
  <% else %>
  <%= image_tag @user.picture.url(:thumb),:alt => @user.name+"_default" %>
  <% end %>

但是不能加载format.js { render template: 'users/update.js.erb'},后来看了另一个例子,说是如果跳转到bootstrap modal,需要在链接上加data-remote="true",如:

<%= link_to "Edit", edit_user_path(@user), remote: true, class: "btn btn-info" %>

这样是可以打开modal的。但是我的需求是在图片上传完成后,即onchange: 'this.form.submit()' 完成后,再跳到modal进行裁剪,那么该怎么添加跳转语句呢?非常感谢~

AJAX请求成功之后运行相应的js显示modal框不就可以了??

@liukun_lk 请问下我该怎么修改代码呢?如果是用这样的方法:

<script>
  $(function () {
      $("#user_avatar").on("change",function () {
          $("#upload-modal").modal("show");
      })
  })
</script>

这个modal窗口会一闪而过,就是先执行js代码,然后再通过user_controller.erb中跳转页面

非常感谢~

一闪而过可能是你刷新页面了,也许你需要的是 http://caibaojian.com/javascript-stoppropagation-preventdefault.html

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册