我想使用Jasny 的 Twitter Bootstrap 扩展设置我的 Rails simple_form 图像上传字段的样式。我已经(成功地)使用 CarrierWave 上传图像。
目前,我的表单有效,并且代码看起来像这样(为了清楚起见,我删除了一些 html、一些表单字段并设计了错误消息代码):
<%= simple_form_for(resource, :as => resource_name, :url => registration_path(resource_name), :html => {class: "form-horizontal", :method => :put }) do |f| %>
<%= f.input :username, :label => "username" %>
<%= f.simple_fields_for :picture do |pic| %>
<%= pic.input :image, :as => :file, :label => "upload a photo" %>
<% end %>
<%= f.input :current_password, :label => "enter password to confirm update(s)" %>
<%= f.button :submit, "Update", class: "btn btn-success" %>
<% end %>
“simple_fields_for :picture”部分产生以下 HTML:
<div class="control-group file optional">
<label class="file optional control-label" for="user_picture_attributes_image">
upload a photo
</label>
<div class="controls">
<input class="file optional" id="user_picture_attributes_image" name="user[picture_attributes][image]" type="file">
</div>
</div>
要使用 Jasny 代码,我想也许我可以用他们文档中的代码替换“simple_fields_for :picture”部分,除了 - 在相当绝望的尝试中 - 我已经手动将它添加到 input-tag 中:id = user_picture_attributes_image" name="user[picture_attributes][image]"
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="input-append">
<div class="uneditable-input span3">
<i class="icon-file fileupload-exists"></i>
<span class="fileupload-preview"></span>
</div>
<span class="btn btn-file">
<span class="fileupload-new">Select file</span>
<span class="fileupload-exists">Change</span>
<input type="file" id="user_picture_attributes_image" name="user[picture_attributes][image]"/>
</span>
<a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
</div>
</div>
它不起作用(duh :D)。我不够熟练,无法深入理解 Jasny 的 bootstrap-fileupload.js 中的 javascript 部分发生了什么,也没有在 simple_form 的幕后工作,所以我不知道是否可以更改其中的某些内容以使其工作。一些谷歌搜索告诉我有人创建了扩展rails-jasny-bootstrap-extension,但遗憾的是除了原始的 css 和 js 之外还没有代码。在这里很难画出空白。
对于上下文:这里的资源是用户。我的 user.rb 看起来像这样(相关代码):
class User < ActiveRecord::Base
has_one :picture, as: :attachable, :dependent => :destroy
accepts_nested_attributes_for :picture
end
我的图片模型如下所示:
class Picture < ActiveRecord::Base
attr_accessible :image, :remote_image_url, :remove_image, :thumb_width, :thumb_height
attr_accessible :attachable_id, :attachable_type
belongs_to :attachable, polymorphic: true
mount_uploader :image, ImageUploader
end
视觉上所需差异的屏幕截图(忽略样式):
链接到 Jasny 的 bootstrap-fileupload.zip 在此先感谢您的浏览,并为文字墙感到抱歉;让我知道是否需要添加任何其他信息。
(PS .:如果有人知道一个简单的替代方案,那也将不胜感激。)