通过输入完成输入后的Rails4，然后如何触发引导程序模态? [英] Rails4 after upload completion by input and then how to trigger bootstrap modal?

问题描述

我的宝石文件:

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

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

Now I want to use form_for upload the user picture, my 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 %>

我的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

我的update.js.erb:

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

我的_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>

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

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?

在input完成onchange: 'this.form.submit()'之后，它可以呈现到模态窗口中，该怎么做?非常感谢您的帮助.

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.

推荐答案

我找到了另一种在rails中上传图像的方法.我得出结论，这是到目前为止我所知道的最好的方法.您必须使用 carrierwave gem.我现在将放置使用它所需的代码.无论如何，如果您可以检查github仓库或此发布.

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.

好，那就放手吧.您将必须首先在全球范围内安装gem，但甚至必须在项目中本地安装.

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

$ gem install carrierwave

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

In Rails, add it to your Gemfile:

gem 'carrierwave', '~> 1.0'

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

Now restart the server to apply the changes.

首先生成一个上传器:

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

创建照片迁移

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

和模型

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

然后是控制器

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

表单上传:

<!-- 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!

这篇关于通过输入完成输入后的Rails4，然后如何触发引导程序模态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！