通过输入上传完成后Rails4然后如何触发bootstrap模式？

My Gemfile:

我的Gemfile：

gem 'rails', '4.2.8'
gem 'carrierwave', '~> 1.2', '>= 1.2.2'
gem 'mini_magick', '~> 4.8'
gem 'Jcrop', '~> 0.1.0'

Now I want to use form_for upload the user picture, my show.html.erb:

现在我想使用form_for上传用户图片，我的show.html.erb：

    <%= form_for @user, :html => {:multipart => 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 %>

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

</div>

<!-- Show user picture -->
<% 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 %>

My user_controller.rb :

我的user_controller.rb：

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] = "Success update"
      end
    else
      render :edit
    end
  end

My update.js.erb:

我的update.js.erb：

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

My _modal.html.erb:

我的_modal.html.erb：

<div class="modal fade" id="upload-modal" aria-labelledby="modalLabel" role="dialog" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">Crop Image</h4>
      </div>
      <div class="modal-body">
        <div class="col-md-8">
          <%= image_tag @user.picture_url(:large), id: "cropImage" %>
        </div>
        <div class="col-md-4">
          <h4>Preview</h4>
          <div style="width:100px; height:100px; overflow:hidden;">
            <%= image_tag @user.picture.url(:large), :id => "user_preview" %>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <%= form_for @user do |f| %>
          <% %w[x y w h].each do |attribute| %>
            <%= f.hidden_field "crop_#{attribute}" %>
          <% end %>
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <%= f.submit "crop" %>
        <% end %>
      </div>
    </div>
  </div>
</div>

Now I need after upload picture, the _modal.html.erb can display. But it seems that format.js { render template: 'users/update.js.erb'} in user_controller.rb cann't work. This is for why?

现在我需要上传图片后，_modal.html.erb可以显示。但似乎user_controller.rb中的format.js {render template：'users / update.js.erb'}无法正常工作。这是为什么？

And what should I do in user_controller.rb that after input complete onchange: 'this.form.submit()' it can render to the modal window? Thanks so much for your help.

我应该在user_controller.rb中做什么，输入完成onchange后：'this.form.submit（）'它可以渲染到模态窗口？非常感谢你的帮助。

1 个解决方案

#1

I found another way to upload images in rails. I arrived at the conclusio that is the best method I know so far. You have to use carrierwave gem. I will put now the code needed in order to use it. Anyway if you can check the github repo or this post.

我找到了另一种在rails中上传图像的方法。我到达了conclusio，这是迄今为止我所知道的最好的方法。你必须使用carrierwave gem。我现在将把所需的代码用于使用它。无论如何，如果你可以检查github回购或这篇文章。

Ok so lets go. You will have first to install the gem globally, but even locally in your project.

好吧，让我们走吧。您将首先在全局安装gem，但即使在本地项目中也是如此。

$ gem install carrierwave

In Rails, add it to your Gemfile:

在Rails中，将其添加到您的Gemfile：

gem 'carrierwave', '~> 1.0'

Now restart the server to apply the changes.

现在重新启动服务器以应用更改。

Start off by generating an uploader:

首先生成一个上传器：

rails generate uploader Photos

this should give you a file in:

这应该给你一个文件：

# app/uploaders/photos_uploader.rb
class PhotosUploader < CarrierWave::Uploader::Base
  storage :file
  # will save photos in /app/public/uploads
  def store_dir
    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  end
end

Create Photos migration

创建照片迁移

class CreatePhotos < ActiveRecord::Migration
  def change
    create_table :photos do |t|
      t.string :name, :null => false
      t.binary :data, :null => false
      t.string :filename
      t.string :mime_type

      t.timestamps null: false
    end
  end
end

And model

和模型

require 'carrierwave/orm/activerecord'
class Photo < ActiveRecord::Base
  mount_uploader :data, PhotosUploader
end

Then controller

然后控制器

class PhotosController < ApplicationController
  def index
    @photos = Photo.all
  end
  def show
    @photo = Photo.find(params[:id])
  end
  def new
    @photo = Photo.new
  end
  def create
    # build a photo and pass it into a block to set other attributes
    @photo = Photo.new(photo_params)
    # normal save
    if @photo.save
      redirect_to(@photo, :notice => 'Photo was successfully created.')
    else
      render :action => "new"
    end
  end
  private
    def photo_params
      params.require(:photo).permit!
    end
end

The form upload:

表格上传：

<!-- new.html.erb -->
<%= form_for(@photo, :html => {:multipart => true}) do |f| %>
  <div class="field">
    <%= f.label :name %>
    <%= f.text_field :name %>
  </div>
  <div class="field">
    <%= f.label :data %>
    <%= f.file_field :data %>
  </div>
  <div class="actions">
    <%= f.submit "Upload" %>
  </div>
<% end %>

And you load the file in a view like this.

然后在这样的视图中加载文件。

<!-- show.html.erb -->
<h3>Photo: <b><%= @photo.name %></b></h3>
<%= image_tag @photo.data.url %>

you could also trigger a modal after image upload like this:

您还可以在图片上传后触发模式，如下所示：

# app/assets/javascripts/photos.coffee
$ ->
  alert('Photo Uploaded - You can launch modal here')

All right that's all. Let me know how is going!

好吧就是这样。让我知道怎么回事！

#1