更改默认的“选择文件"按钮导轨 [英] Changing default "choose file" button rails

问题描述

我想更改 Rails 应用中默认的选择文件"按钮.我正在使用 Bootstrap 并想用 Bootstrap Glyphicons 之一替换按钮.

这是控制选择文件"按钮的class form-group的div

<%= f.label :image %><br><%= f.file_field :image, class: "form-control" %>

解决方案

HTML

您需要知道的是，这不是 Rails 问题 - 这是一个 - 给他的道具!!

我们使用了 jquery-file-upload对于我们的按钮 - 基本上允许我们选择文件 &同时上传.真了不起:

#app/views/your_controller/view.html.erb<div class="avatar"><!-- 新头像上传表单--><%= form_for :upload, :html =>{:multipart =>真，:id =>"头像"}, :method =>:put, url: profile_path(current_user.id), "data_id" =>current_user.id 做 |f|％＞<div class="btn btn-success fileinput-button avatar" id="avatar_container"><%= f.file_field :avatar, :title =>上传新的"%><%= image_tag(@user.profile.avatar.url, :width=>'100%', :id => "avatar_img", :alt => name?(@user)) %>

<%结束%>

#app/assets/javascripts/application.js ->允许直接上传(不提交)$('#avatar').fileupload({url: '/profile/' + $(this).attr('data_id'),数据类型:'json'，类型:'帖子'，添加:函数(e，数据){//$(".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');数据提交()；},成功:功能(数据，状态){;$("#avatar_img").fadeOut('fast', function() {$(this).attr("src", data.avatar_url).fadeIn('fast', function(){$(this).avatar_loading('avatar_loading');});});}});

I would like to change the default "choose file" button in my Rails app. I am using Bootstrap and would like to replace the button by one of the Bootstrap Glyphicons.

Here is the div of class form-group that controls the "choose file" button

<div class="form-group">
    <%= f.label :image %><br>
    <%= f.file_field :image, class: "form-control" %>
</div>

解决方案

HTML

Something you need to know is this is not a Rails issue - it's an HTML one. Although it is possible, it's more of a hack than a real customization

A good example is a demo we made here (you'll have to register & click on the "profile" button at top right):

Customizing the file input button isn't actually viable as you'd want - you basically need to hide the button & replace it with your own element, which can be then bound to a JS event.

--

Methods

Pavan posted an epic JSFiddle in the comments - props to him!!

We used jquery-file-upload for our button - basically allows us to select the file & upload at the same time. Truly amazing:

#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');
            });
        });
    }

});

这篇关于更改默认的“选择文件"按钮导轨的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！