Question

我想更改默认＆＃34;选择文件＆＃34;我的Rails应用程序中的按钮。我正在使用 Bootstrap ，并希望用 Bootstrap Glyphicons之一替换该按钮。

enter image description here

以下是div class的{{1}}，用于控制＆＃34;选择文件＆＃34;按钮

form-group

Answer 1

<强> HTML

您需要知道的是这不是Rails问题 - 它是HTML问题。虽然可能，但它更像是一个黑客而不是真正的自定义

一个很好的例子是a demo we made here （您必须注册并点击右上角的“个人资料”按钮）：

enter image description here

根据您的需要自定义file input按钮实际上并不可行 - 您基本上需要隐藏按钮＆amp;用你自己的元素替换它，然后绑定到JS事件。

-

<强>方法

Pavan 在评论中发布了一篇史诗JSFiddle - 道具给他!!

我们使用jquery-file-upload作为按钮 - 基本上允许我们选择文件＆amp;同时上传。真是太神奇了：

#app/views/your_controller/view.html.erb
<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>

#app/assets/javascripts/application.js -> allows to upload directly (no submit)
$('#avatar').fileupload({

    url: '/profile/' + $(this).attr('data_id'),
    dataType: 'json',
    type: 'post',

    add: function (e, data) {
        //$(".items .avatar .avatar").prepend('<div class="loading" id="avatar_loading"><img src="<%= asset_path("profile/avatar_loading.gif") %>"></div>');
        //$('#avatar_loading').fadeIn('100');
        $(this).avatar_loading('avatar_loading');
        data.submit();
    },
    success: function (data, status) {;
        $("#avatar_img").fadeOut('fast', function() {
            $(this).attr("src", data.avatar_url).fadeIn('fast', function(){
                $(this).avatar_loading('avatar_loading');
            });
        });
    }

});

Answer 2

RoR file_field不是很容易定制的。你必须使用一些“魔法”。

这article解决了您的问题。但你也可以使用简单的html风格。

<input type="file" class="btn btn-small btn-primary btn-inverse" />

或

<input type="file" class="input-file" />

更改默认“选择文件”按钮栏

2 个答案: