Question

我正在使用bootstrap 3和rails 4.我想删除Avatar下的白色输入字段行，只显示我的文件上传按钮！

这就是它的样子： enter image description here

这是我的edit.html.erb：

<div class="col-lg-5">
<div class="well bs-component">
<h2>Edit <%= resource_name.to_s.humanize %></h2>

<%= bootstrap_form_for(resource, :as => resource_name, :url => registration_path(resource_name), :html => { :method => :put, :multipart => true }) do |f| %>
  <%= devise_error_messages! %>
<%= image_tag @user.avatar.url %>
  <div>
  <%= f.email_field :email, :autofocus => true %></div>

  <% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
    <div>Currently waiting confirmation for: <%= resource.unconfirmed_email %></div>
  <% end %>

  <div> <i>(leave blank if you don't want to change it)</i><br />
  <%= f.password_field :password, :autocomplete => "off" %></div>

  <div><br />
  <%= f.password_field :password_confirmation %></div>

  <div><i>(we need your current password to confirm your changes)</i><br />
  <%= f.password_field :current_password %></div>
<%= f.label 'Add an image' %>
  <%= f.file_field :avatar %>
  <div><%= f.submit "Update" %></div>
<% end %>

<h3>Cancel my account</h3>

<p>Unhappy? <%= button_to "Cancel my account", registration_path(resource_name), :data => { :confirm => "Are you sure?" }, :method => :delete %></p>

<%= link_to "Back", :back %>
</div>
</div>

这是我的html输出：

<h2>Edit User</h2>

<form accept-charset="UTF-8" action="/users" class="edit_user" enctype="multipart/form-data" id="edit_user" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" value="✓" type="hidden"><input name="_method" value="put" type="hidden"><input name="authenticity_token" value="vpVmH4k1YDXgJxAiZtVoI872hR67COFNoo1irki8sAY=" type="hidden"></div>

<img alt="Justdoit" src="/system/users/avatars/000/000/001/original/justdoit.png?1393323443">
  <div>
  <div class="form-group"><label for="user_email">Email</label><input autofocus="autofocus" class="form-control" id="user_email" name="user[email]" value="ggeorgiev@live.co.uk" type="email"></div></div>


  <div> <i>(leave blank if you don't want to change it)</i><br>
  <div class="form-group"><label for="user_password">Password</label><input autocomplete="off" class="form-control" id="user_password" name="user[password]" type="password"></div></div>

  <div><br>
  <div class="form-group"><label for="user_password_confirmation">Password confirmation</label><input class="form-control" id="user_password_confirmation" name="user[password_confirmation]" type="password"></div></div>

  <div><i>(we need your current password to confirm your changes)</i><br>
  <div class="form-group"><label for="user_current_password">Current password</label><input class="form-control" id="user_current_password" name="user[current_password]" type="password"></div></div>
<label for="user_Add an image">Add an image</label>
  <div class="form-group"><label for="user_avatar">Avatar</label><input class="form-control" id="user_avatar" name="user[avatar]" type="file"></div>

  <div><input class="btn btn-default" name="commit" value="Update" type="submit"></div>
</form>
<h3>Cancel my account</h3>

<p>Unhappy? </p><form action="/users" class="button_to" method="post"><div><input name="_method" value="delete" type="hidden"><input data-confirm="Are you sure?" value="Cancel my account" type="submit"><input name="authenticity_token" value="vpVmH4k1YDXgJxAiZtVoI872hR67COFNoo1irki8sAY=" type="hidden"></div></form><p></p>

<a href="javascript:history.back()">Back</a>

Answer 1

HTML输入元素的样式化不是浏览器当前支持的input type=file show only button

我们最近使用jquery-file-upload设置了此类按钮的样式（site）：

enter image description here

这基本上可以通过用简单的基于CSS的按钮替换默认按钮来实现。我们使用的代码在这里：

 .items .avatar {
    display: inline-block;
    position: relative;
    background: #000;
    width: 260px;
 }
 .items .avatar .avatar img     { display: block; }
 .items .avatar .avatar         { position: relative; }
 .items .avatar .avatar:after   {
    transition: opacity 0.25s ease;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 160px 0 0 107px;
    content: url('profile/new_avatar.png');
    background: url('profile/photo_delete_bg.png');
    opacity: 0;
    z-index: 2;
 }
 .items .avatar .avatar input { z-index: 999; height: 100%;}
 .items .avatar .avatar:hover:after   { opacity: 0.8; }
 .items .avatar .avatar:active:after  { opacity: 0.6; }

<div class="items">
    <div class="avatar">        
     <!-- New Avatar Upload Form -->
     <%= form_for :upload, :html => {:multipart => true, :id => "avatar"}, :method => :put, url: profile_path(current_user.id), "data_id" => current_user.id do |f| %>
         <div class="btn btn-success fileinput-button avatar" id="avatar_container">
             <%= f.file_field :avatar, :title => "Upload New" %>
             <%= image_tag(@user.profile.avatar.url, :width=> '100%', :id => "avatar_img", :alt => name?(@user)) %>
         </div>
     <% end %>
            <div class="name"><%= link_to name?(@user), root_path %></div> 
    </div>

这个问题有一个更好的设置（我直接从它复制）：

您可以在此处尝试一个有效的示例：http://jsfiddle.net/VQJ9V/307/   （经过FF 7，IE 9，Safari 5，Opera 11和Chrome 14测试）

它的工作原理是创建一个大文件输入（字体大小：50px），然后   将它包装在具有固定大小和溢出的div中：隐藏。该   然后输入只能通过这个＆＃34;窗口＆＃34; DIV。 div可以   给定背景图像或颜色，可以添加文本和输入   可以透明化以显示div背景：

HTML:

<div class="inputWrapper">
    <input class="fileInput" type="file" name="file1"/> </div> CSS:

.inputWrapper {
    height: 32px;
    width: 64px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    /*Using a background color, but you can use a background image to represent a button*/
    background-color: #DDF; } .fileInput {
    cursor: pointer;
    height: 100%;
    position:absolute;
    top: 0;
    right: 0;
    z-index: 99;
    /*This makes the button huge. If you want a bigger button, increase the font size*/
    font-size:50px;
    /*Opacity settings for all browsers*/
    opacity: 0;
    -moz-opacity: 0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0) }

Rails bootstrap表单文件上传按钮不起作用？

1 个答案: